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

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;
}

这里我做错了什么？

- Steven

Answer 1

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

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

- Joe

---

嗨，我对你的方法和@Kyle Sevenoaks在下面提出的(float: left)有些好奇。你有什么建议哪个更好吗？两种方法似乎都能达到相同的视觉效果，但我只是想知道。谢谢。 - Salvatore Iovene

@SalvatoreIovene，table-cell允许垂直和水平对齐。http://jsfiddle.net/zgxHB/20/，是浮动解决方案的一个视图。 - Joe

感谢@JoeTuskan。所以如果您不关心垂直对齐，这两种方式是可以互换的吗？ - Salvatore Iovene

@SalvatoreIovene，如果您不需要垂直对齐，请使用float，因为它被广泛理解。 - Joe

Answer 2

尝试将li元素向左浮动。这样可以在水平线上显示它们，并保留它们的块状态。

- Kyle

Answer 3

display:inline-block; 将元素视为内联级别，这意味着在呈现页面时，标记中的任何空格都会被显示。

尝试以下方法：

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

- Kyle