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

前端之家收集整理的这篇文章主要介绍了html – 垂直对齐内联块列表项中的内容前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正试图水平显示无序列表.在每个列表项中,我有一个带有图像的锚标记,我想在列表项中垂直对齐显示.这是我的

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

我在这做错了什么?

解决方法

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

尝试使用display:table-cell;而不是显示:inline-block;

原文链接:https://www.f2er.com/html/226314.html

猜你在找的HTML相关文章