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，只需在父 li 元素上使用 text-align: center。

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

还值得指出的是，ul 或 ol 的唯一 有效子级是 li 元素。任何其他内容必须包裹在li中，否则标记无效，然后用户代理尝试更正标记-up 在准备 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 .