如何在中间垂直对齐图像 <li> ？

Question

地狱所有人：以下是html代码，我想垂直对齐li中的每个图像，经过大量的搜索后不知道。 我可以使用jquery根据图像的高度将其设置为margin-top，但这是不方便的解决方案。

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=GB2312"/>
    <style type="text/css">
        .psdthumb2 ul {
            list-style: none;

        }
        li.qq2{
            height: 400px;
            width: 400px;
            background-color: red;
        }
    </style>
</head>

<body>
<div class="psdthumb2">
    <ul>
        <li>111111</li>
        <li class="qq2">
            <img src="http://mat1.qq.com/www/images/allskin/wmlogo.gif">
        </li>
    </ul>
    <ul>
        <li>222222</li>
        <li class="qq2">
            <img src="http://img11.360buyimg.com/n4/3445/522086b7-dc0a-432c-b027-7b2a80c79f29.jpg">
        </li>
    </ul>
</div>
</body>
</html>

提前致谢。

Answer 1

li.qq2{
   display : table-cell;
   vertical-align : middle;
   text-align : center;
}

这应该工作。

已在Chrome，Safari，FF和IE 9中测试。

Answer 2

这是一个工作示例：

的CSS

.psdthumb2 ul 
{
    list-style: none;
}
li.qq2
{
    height: 400px;
    width: 400px;
    background-color: red;
    display: table-cell;
    vertical-align: middle;
}

的HTML

<div class="psdthumb2">
    <ul>
        <li>111111</li>
        <li class="qq2">
            <img src="http://mat1.qq.com/www/images/allskin/wmlogo.gif">
        </li>
    </ul>
    <ul>
        <li>222222</li>
        <li class="qq2">
            <img src="http://img11.360buyimg.com/n4/3445/522086b7-dc0a-432c-b027-7b2a80c79f29.jpg">
        </li>
    </ul>
</div>

基本上，您只需要添加display: table-cell; vertical-align: middle; display: table-cell; vertical-align: middle; 到您的CSS类。

希望能帮助到你！

Answer 3

.qq2 img{vertical-align:middle;}

应该管用。

Answer 4

查看带有更新代码的演示： -http : //jsbin.com/ozixop/edit#javascript,html,live

您只需更新CSS并为垂直中间添加一些属性，如下所述：

    li.qq2{
background-color: red;
display: table-cell;
height: 400px;
text-align: center;
vertical-align: middle;
width: 400px;
    }

如何在中间垂直对齐图像 <li> ？

问题描述

4 个解决方案

解决方案1
2 2012-05-23 03:56:14

解决方案2
2 2012-05-23 04:21:00

解决方案3
1 2012-05-23 03:51:18

解决方案4
1 已采纳 2012-05-23 04:34:31

如何在中间垂直对齐图像 <li> ？

问题描述

4 个解决方案

解决方案1 2 2012-05-23 03:56:14

解决方案2 2 2012-05-23 04:21:00

解决方案3 1 2012-05-23 03:51:18

解决方案4 1 已采纳 2012-05-23 04:34:31

解决方案1
2 2012-05-23 03:56:14

解决方案2
2 2012-05-23 04:21:00

解决方案3
1 2012-05-23 03:51:18

解决方案4
1 已采纳 2012-05-23 04:34:31