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

首页

web前端

html教程

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

PHP中文网

Mar 30, 2017 pm 05:30 PM

如何让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>

别用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，你能编辑一下吗？

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

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

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

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML与CSS和JavaScript：比较Web技术Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是构建现代网页的核心技术：1.HTML定义网页结构，2.CSS负责网页外观，3.JavaScript提供网页动态和交互性，它们共同作用，打造出用户体验良好的网站。

HTML作为标记语言：其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定义网页的结构和内容，其目的在于提供一种标准化的方式来展示信息。1）HTML通过标签和属性组织网页的各个部分，如标题和段落。2）它支持内容与表现分离，提升维护效率。3）HTML具有可扩展性，允许自定义标签增强SEO。

HTML，CSS和JavaScript的未来：网络开发趋势Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。

HTML：结构，CSS：样式，JavaScript：行为Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是：1.HTML定义网页结构，2.CSS控制网页样式，3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML的未来：网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript：比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。

HTML：是编程语言还是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增强WebevebDevelopment。

HTML：建立网页的结构Apr 14, 2025 am 12:14 AM

HTML是构建网页结构的基石。1.HTML定义内容结构和语义，使用、、等标签。2.提供语义化标记，如、、等，提升SEO效果。3.通过标签实现用户交互，需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号，需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。

See all articles