对齐列表元素中的元素

Question

我有一个n项目的列表。

我试图对齐a元素的子元素img，紧挨着兄弟元素p。

我试过设置为display:inline-block，但我没有看到任何改变。我的代码如下所示：

<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> 

我的目标是创造一种面板，其中a元素是左侧与文本旁边，并在同一面板居中h3。

<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

我不明白你的问题的目标。但是，告诉我，如果我的答案是错的:)

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

使用display:inline-block在a和p并设置一些width，在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>

使用 text-align:center