Home > Article > Web Front-end > How to center the pictures in li vertically
How to center the pictures in li vertically
- PHP中文网Original
- 2017-03-30 17:30:443340browse
How to vertically center the picture in li?
<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>Don’t use display:table or the like, because such a li will occupy the size of a large cell. The place is no longer close to the picture.
Reply to the discussion (solution)
<style>
.box {
/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align:middle;
/*设置水平居中*/
text-align:center;
/* 针对IE的Hack */
*display: block;
*font-size:262px;
/*约为高度的0.873，300*0.873 约为262*/
*font-family:Arial;
/*防止非utf-8引起的hack失效问题，如gbk编码*/
width:400px; height:300px; border:1px solid #eee;
}
.box img {
/*设置图片垂直居中*/
vertical-align:middle;
}
</style>
<div class="box">
<img src="mm1.jpg"/>
</div>Is it necessary to center the image relative to the small dot in front of li? If so, you can try my writing method below:
.psdthumb2 ul{list-style:none}
.psdthumb2 ul li{background:url(xxxx.jpg) no-repeat left center;
padding-left:(这里的数值跟前面的图片宽度有关系)px}The idea is to replace the small dot in front of li and make it always centered up and down.
It seems that this is not for li. The following is the complete html. Can you edit it?
<!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>Or you can try to use bacbf9e1ad7f40415ce1670e31edfee3adca8a5fa06ffeafb062c2e3f274b930 to circle the things you want to center, such as
<!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=UTF-8"/>
<style type="text/css">
.psdthumb2 ul {
list-style: none;
}
li.qq2{
height: 400px;
width: 400px;
background-color: red;
position:relative;
}
img{
position:absolute;
left:50%;
top:50%;
}
#q1{
margin-left:-22px;
margin-top:-21px;
}
#q2{
margin-left:-50px;
margin-top:-50px;
}
</style>
</head>
<body>
<div class="psdthumb2">
<ul>
<li>111111</li>
<li class="qq2">
<img src="http://mat1.qq.com/www/images/allskin/wmlogo.gif" id="q1">
</li>
</ul>
<ul>
<li>222222</li>
<li class="qq2">
<img src="http://img11.360buyimg.com/n4/3445/522086b7-dc0a-432c-b027-7b2a80c79f29.jpg" id="q2">
</li>
</ul>
</div>
</body>
</html> The above is how to make the pictures in li vertical Centered content, please pay attention to the PHP Chinese website (www.php.cn) for more related content!