css - 如何将img水平对齐到列表项内的中心

Question

这是我的页面结构；

我在下面的所有“li”中都有图像。我正在尝试在 li 元素中对齐这​​些图像。我试图通过将左右边距设置为自动来做到这一点，但它不起作用。

这是CSS；

#navcontainer ul li
{
    display: inline-block;
    width:80px;
}

#navcontainer ul li img
{
    margin-right:auto;
    margin-left:auto;
}

我确信当我在它正在工作的 css 中设置宽度或高度或任何其他东西时，它不是关于从 css、bcs 访问元素。但我没有设法将它与中心对齐。

Answer 1

如果它们是inline-block，只需text-align: center在父li元素上使用。

如果它们是display: block，那么您可以使用margin: 0 auto 0 auto( top, right, bottom left)。

还值得指出的是， a or的唯一有效子元素是元素。任何其他内容都必须用 包裹，否则标记无效，然后用户代理在准备 DOM 时尝试更正标记。并且在各种用户代理中并不一致。ulollili

使用以下标记作为演示：

<ul>
    <li class="inlineBlock"><img src="http://lorempixel.com/100/100/sports" /></li>
    <li class="block"><img src="http://lorempixel.com/100/100/nature" /></li>
</ul>​

使用以下 CSS：

li.inlineBlock {
    text-align: center;
}
li.inlineBlock img {
    display: inline-block;
}

li.block img {
    display: block;
    margin: 0 auto 0 auto;
}​

JS 小提琴演示。