[英]How to vertically align image middle in <li>?
地獄所有人:以下是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>
提前致謝。
li.qq2{
display : table-cell;
vertical-align : middle;
text-align : center;
}
這應該工作。
已在Chrome,Safari,FF和IE 9中測試。
這是一個工作示例:
的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類。
希望能幫助到你!
.qq2 img{vertical-align:middle;}
應該管用。
查看帶有更新代碼的演示: -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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.