How to center the pictures in li vertically-HTML Tutorial-php.cn

How to center the pictures in li vertically

PHP中文网

Release： 2017-03-30 17:30:44

Original

3359 people have browsed it

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>

Copy after login

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>

Copy after login

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}

Copy after login

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>

Copy after login

Or you can try to use

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>

Copy after login

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!