Question

这是我的页面结构;

""https://i.sstatic.net/2RQVH.png" alt="此处输入图像描述"/ >

我在下面所有的“ li” 中都有图像。我正在试图将这些图像在 li 元素中进行对齐。我正尝试在设置右侧和左侧间距以自动方式进行对齐, 但是没有效果。

这是CS;

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

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

我敢肯定,这不是从 cs、 bcs 获取元素的问题, 当我设定宽度或高度时, 或者在它工作的 cs 中的其他任何事物。但我没有设法将其与中心对齐。

Answer 1

如果它们重设 < code> inline block , 只需使用 text- align: central 在父元素 < code> >li 上使用 < code > text- ali: center 。

如果他们重写 display: block , 那么您就可以使用 margin: 0 自动 0 自动 < /code> ( top , >right , bottom > ) 。



还值得指出的是, ul  有效子元素的 ul  或 ol  的有效子元素是 li  元素。 任何  other  内容都必须被包裹在 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 Didle demo 。

友情链接