首页 > 代码库 > 将图片在div中进行水平和垂直对齐
将图片在div中进行水平和垂直对齐
将图片在div中进行水平和垂直对齐
要进行水平对齐,只需在父级元素的样式中指定:
text-align: center;
注意,是在父级元素的样式中指定,而不是在img本身的样式中指定。
要进行垂直对齐,相对来说则麻烦得多。期待简单的在img元素的父级元素的样式中指定vertical-align: middle是行不通的,在img元素本身的样式中指定也同样行不通(你在网上查到的方法都是这样)。真正有效的方法如下:
首先,由于vertical-align: middle这个样式是只有在display样式以inline-block模式起作用时才会生效,因此,你必须先得让display的inline-block生效才行。而inline-block要生效,则同一行必须至少有两个元素才行,因为只有两个元素在一起才能形成“内联”的关系。
因此,你需要在图片的同一行放置另外一个元素,并对这个元素进行样式指定:
vertical-align:middle;
display:inline-block;
height:100%;
这里height设置为100%,表示让这个元素的高度充满其父级(也是图片的父级)。这样,当这两个元素以其自身的高度中心线对齐时,自然就正好位于父级元素的垂直中心位置。
完整的HTML代码如下:
<div id="header1">
<span id="span1"></span>
<img src="http://www.mamicode.com/1.png">
</div>
完整的CSS代码如下:
#span1{
vertical-align:middle;
display:inline-block;
height:100%;
}
img {
vertical-align: middle;
}
这里使用的这个位于同一行的额外的元素是span,你用别的元素也可以,比如label、b等等,只要当这个元素的height属性被设置为100%时确实可以充满父级元素的高度即可。
将图片在div中进行水平和垂直对齐