Ausrichten von Elementen innerhalb eines Listenelements

Question

Ich habe eine Liste von n Elementen.

Ich versuche, das a Element mit Kind img, neben Geschwister p Element auszurichten.

Ich habe versucht, beide auf display:inline-block, aber ich sehe keine Änderung. Mein Code sieht wie folgt aus:

<li> 
    <h3>Header 3</h3> 
    <a href="#"><img src="example.img" alt=""></a> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate interdum lacus in hendrerit. Donec libero metus, maximus sit amet.</p> 
</li> 

Mein Ziel ist es, eine Art von Platte zu schaffen, wo die a Element auf der linken Seite mit dem Text daneben ist, und die h3 in derselben Platte zentriert.

<li> 
 
    <h3>Header 3</h3> 
 
    <a href="#"> 
 
    <img src="example.img" alt=""> 
 
    </a> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate interdum lacus in hendrerit. Donec libero metus, maximus sit amet.</p> 
 
</li>

Answer 1

habe ich nicht verstanden, was Ihre Frage Ziel. Aber sagen Sie mir, wenn meine Antwort falsch war :)

li{ 
 
    list-style: none; 
 
} 
 
h3{ 
 
    text-align: center; 
 
} 
 
img{ 
 
    float: left; 
 
} 
 
p{ 
 
    text-align: right; 
 
}

<li> 
 
     <h3>Header 3</h3> 
 
     <a href="#"><img src="example.img" alt=""></a> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate interdum lacus in hendrerit. Donec libero metus, maximus sit amet.</p> 
 
</li>

Answer 2

Verwendung display:inline-block in a und p und stellen einige width verwenden text-align:center in h3

body, 
 
h3, 
 
p { 
 
    margin: 0; 
 
    font-size:16px /* restore font-size inline-block fix*/ 
 
} 
 
h3 {text-align: center} 
 
ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size: 0 
 
    /*inline-block fix gap*/ 
 
} 
 
li { 
 
    background: red; 
 
} 
 
a, 
 
li, 
 
p { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    width: 50% 
 
} 
 
img { 
 
    width: 100%; 
 
    display: block 
 
}

<ul> 
 
    <li> 
 
    <h3>Header 3</h3> 
 
    <a href="#"> 
 
     <img src="//lorempixel.com/100/100" alt=""> 
 
    </a> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate interdum lacus in hendrerit. Donec libero metus, maximus sit amet.</p> 
 
    </li> 
 
    <li> 
 
    <h3>Header 3</h3> 
 
    <a href="#"> 
 
     <img src="//lorempixel.com/100/100" alt=""> 
 
    </a> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate interdum lacus in hendrerit. Donec libero metus, maximus sit amet.</p> 
 
    </li> 
 
</ul>