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

发布时间：2020-12-14 18:28:19 所属栏目：资源来源：网络整理

导读：我正试图水平显示无序列表.在每个列表项中,我有一个带有图像的锚标记,我想在列表项中垂直对齐显示.这是我的 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"

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

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;

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!