在我的Web开发职业生涯中,我经常需要居中各种东西。但是我想知道是否有一种简单的方法可以垂直居中一张图片而不需要知道图片的尺寸。比如从数据库获取缩略图列表,我不希望每个项目都紧贴父级div的顶部。
<div id="wrapper">
<div id="parent">
<img src="path/i/got/from/database/image.png" />
</div>
</div>
parent
设置为内联元素(如果允许,请使用Purmou的解决方案,它更好),您可以在parent
上设置line-height
等于其height
并在img
上设置vertical-align:middle;
。<div id="wrapper">
<div id="parent">
<img src="http://placehold.it/200x200" />
</div>
</div>
CSS:
img {
vertical-align: middle;
}
#parent {
height:400px;
border:1px solid black;
line-height: 400px;
}
输出:
#parent img{vertical-align:middle;}
#parent
上设置一个高度即可。 - Ariel即使没有JavaScript,也有一个技巧可以做到这一点。我们需要知道父元素的高度,还需要一个标签。
首先,在IMG标签之前或之后添加一个SPAN标签:
<div id="wrapper">
<div id="parent">
<span> </span><img src="path/i/got/from/database/image.png" />
</div>
</div>
通过以下CSS声明,可以将图像对齐到所需位置:
#parent {
height: 500px; /* This height is important for the following lines */
line-height: 500px; /* Text-content needs to get full height for the
'vertical-align'-attribute to work */
}
#parent span {
display: inline-block; /* Should work even for IE6/7 in this case */
height: 500px; /* Needed for IE */
width: 10px;
margin-right: -10px; /* Any element to the right is pushed to the left
offset of the SPAN-tag */
}
#parent img {
vertical-align: middle; /* Aligns the image in the middle of the SPAN-tag */
}
这应该可以在IE6和7上运行。
编辑:
ThinkingStiffs的解决方案更简单,因此更好。但它在IE6上无法工作。
Purmous的解决方案对于IE6和7不起作用,请参见显示声明
我在搜索类似问题的解决方案时发现了这个。该解决方案使用CSS3,因此无法在IE8及以下版本上运行。
虽然这是一个旧问题,但我认为更新的答案可能对某些人有用:
<div id="wrapper">
<div id="parent">
<img src="path/i/got/from/database/image.png">
</div>
</div>
#parent{
width:400px;
height:400px;
background:red; /* just used to highlight box */
text-align:center;
}
#parent img{
position:relative;
top: 50%;
transform: translateY(-50%);
}
#wrapper{
height: 100%;
min-height: 500px;/*Assuming min-height of the container*/
position: relative;
width: 100%;}
#parent{
border: 1px solid;
height: 50px;
position: absolute;
top: 50%;
width: 50px;}
也可以在fiddle上查看 http://jsfiddle.net/kYgqx/2/