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

Question

这是我的页面结构;

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

这是css;

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

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

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

Answer 1

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

如果他们是display: block，那么您可以使用margin: 0 auto 0 auto（top，right，bottom left）。

同样值得指出的是，ul或ol的 仅 有效子元素是li元素。任何其他内容必须包装在li中，否则标记无效，然后用户代理会尝试更正标记时准备DOM。而且并非在各种用户代理中保持一致。

使用以下标记作为演示：

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