Question

div+css中一个背景图片，如何让图片在背景图片上垂直居中

图片水平垂直居中（兼容IE6，IE7，firefox，opera，safari，其中图片可以是任何块元素） .boxout{width:120px; height:119px; display:table; background:url(photoset_bg.gif) no-repeat;} .boxin{display:table-cell; vertical-align:middle; text-align:center; width:114px; height:114px;} /*for IE*/ .boxout{*position:relative;} .boxin{*position:absolute; *top:50%; *left:0;} .boxout p{*position: relative; *top:-50%; *margin:0; *padding:0;} .boxout img{ *margin-top:2px; border:1px solid #ccc;}/*for IE 图片4像素空白bag*/
" width="100" height="33" />
图片没有固定的大小，就是无论它多大多小始中在这个背景上面是垂直水平居中的
回复 y1cheng ：那文章我也看过了，就是我改成自已的，换成背景图片就不行了 ,不是FF那种图片,是FF那种图片所在背景图片中水平垂直居中，它后面那不是有一个背景图吗？
帮忙解决一下，解决后送高分。





Answer 1

<style type="text/css">
.box {
/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align:middle;

/*设置水平居中*/
text-align:center;

/* 针对IE的Hack */
*display: block;
*font-size: 175px;/*约为高度的0.873，200*0.873 约为175*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/

width:200px;
height:200px;
border: 1px solid #eee;

width:100px;
height:100px;
}
.box img {
/*设置图片垂直居中*/
vertical-align:middle;
cursor:pointer;
}
</style>

本文来自: PQ秀秀网(http://www.pqshow.com) 详细出处参考：http://www.pqshow.com/design/htmlcss/200912/12739.html

Answer 2

就不多打字了，蓝色的这篇文章很全面了。 http://bbs.blueidea.com/thread-2666987-1-9.html 转自蓝色理想 没理解你的用意，你是说把FF那种图片换成背景图？ 如果是这样的话，不就是简单的background:url() no-repeat center center;吗。但前提是你背景图片不得小于容器吗，你

这张图片明显比你的.boxout大的多，何来的居中，连完整显示都不能 补充 还是没理解你的意思。最好百度hi聊

Answer 3

<style
type="text/css">
.box
{
/*非IE的主流浏览器识别的垂直居中的方法*/
display:
table-cell;
vertical-align:middle;
/*设置水平居中*/
text-align:center;
/*
针对IE的Hack
*/
*display:
block;
*font-size:
175px;/*约为高度的0.873，200*0.873
约为175*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/
width:200px;
height:200px;
border:
1px
solid
#eee;
width:100px;
height:100px;
}
.box
img
{
/*设置图片垂直居中*/
vertical-align:middle;
cursor:pointer;
}
</style>
本文来自:
PQ秀秀网(http://www.pqshow.com)
详细出处参考：http://www.pqshow.com/design/htmlcss/200912/12739.html

Answer 4

应该是要把 text-align 设成 居中..

如果不行的话, 就只能设置padding 值了

Answer 5

这样

.boxout{
width:120px;
height:119px;
display:table;
background:url(photoset_bg.gif) no-repeat center center;
}