Question

我正在尝试水平显示无序列表。在每个列表项中，我有一个带有图像的锚标记，我想在列表项中垂直对齐显示。这是我的

HTML：

<ul>
    <li>
        <a href="#">
            <img src="1.jpg" alt="" height="50" width="50" />
        </a>
    </li>
    <li>
        <a href="#">
            <img src="2.jpg" alt="" height="50" width="50" />
        </a>
    </li>
    <li>
        <a href="#">
            <img src="3.jpg" alt="" height="50" width="50" />
        </a>
    </li>
</ul>

CSS：

ul
{
    margin: 0;
    padding: 0;
    list-style: none;
    height: 93px;
}

ul li
{
    display: inline-block;
    width: 110px;
    height: 93px;
    text-align: center;
    vertical-align: middle;
}

我在这里做错了什么？

Answer 1

http://jsfiddle.net/zgxHB/1/

尝试使用display: table-cell;代替display: inline-block;

Answer 2

尝试漂浮李的左边。这将以水平线显示它们并保持其阻止状态

Answer 3

显示：内联块;将元素视为内联级别，这意味着在呈现页面时会显示标记中的任何空格。

TRY：

<ul><li>
        <a href="#">
            <img src="1.jpg" alt="" height="50" width="50" />
        </a>
    </li><li>
        <a href="#">
            <img src="2.jpg" alt="" height="50" width="50" />
        </a>
    </li><li>
        <a href="#">
            <img src="3.jpg" alt="" height="50" width="50" />
        </a>
</li></ul>

OR：

<ul><!--
    --><li>
        <a href="#">
            <img src="1.jpg" alt="" height="50" width="50" />
        </a>
    </li><!--
    --><li>
        <a href="#">
            <img src="2.jpg" alt="" height="50" width="50" />
        </a>
    </li><!--
    --><li>
        <a href="#">
            <img src="3.jpg" alt="" height="50" width="50" />
        </a>
    </li><!--
--></ul>

垂直对齐内联块列表项中的内容

3 个答案: