如何让li里的图片垂直居中-html教程-PHP中文网

如何让li里的图片垂直居中

PHP中文网

发布： 2017-03-30 17:30:44

原创

3639人浏览过

<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之类的啊，那样一个li占了一个大的单元格那么大的地方，无法和图片li紧贴在一起了。

回复讨论(解决方案)

<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>

登录后复制

需要图片居中是不是相对于li前面的小圆点的相对居中。如果是的话可以尝试我下面的写法：

.psdthumb2 ul{list-style:none} 
.psdthumb2 ul li{background:url(xxxx.jpg) no-repeat left center;
padding-left:(这里的数值跟前面的图片宽度有关系)px}

登录后复制

思路就是替换 li 前面的小圆点并使其永远上下居中。

你这个貌似不是针对li的，下面是完整的html，你能编辑一下吗？

居然设计家

居然之家和阿里巴巴共同打造的家居家装AI设计平台

查看详情

<!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>

登录后复制

或者可以尝试用<center></center>将你要居中的东西圈起来，比如

<!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>

登录后复制

以上就是如何让li里的图片垂直居中的内容，更多相关内容请关注PHP中文网（www.php.cn）！