html中怎么在li中加图片,如何让li里的图片垂直居中

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

• 111111

• 

• 222222

• 

别用display:table之类的啊，那样一个li占了一个大的单元格那么大的地方，无法和图片li紧贴在一起了。

回复讨论(解决方案)

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

}

需要图片居中是不是 相对于li前面的小圆点的相对居中。如果是的话可以尝试我下面的 写法：.psdthumb2 ul{list-style:none}

.psdthumb2 ul li{background:url(xxxx.jpg) no-repeat left center;

padding-left:(这里的数值跟前面的图片宽度有关系)px}

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

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

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

.psdthumb2 ul {

list-style: none;

}

li.qq2{

height: 400px;

width: 400px;

background-color: red;

}

• 111111

• 

• 222222

• 

或者可以尝试用

将你要居中的东西圈起来，比如/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

}

• 111111

• 

• 222222

• 

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

声明：本文原创发布php中文网，转载请注明出处，感谢您的尊重！如有疑问，请联系admin@php.cn处理