实现在固定尺寸容器内,图片水平垂直居中。
方法 ①
将容器样式的 text-align 设置为 center,行高 line-height 设置为与容器高度相同。代码如下:
<div class="box">
<img src="avatar.jpg">
</div>
.box {
width: 280px;
height: 280px;
border: 1px solid #bbb;
text-align: center;
line-height: 280px;
}
方法 ②
将容器样式的 display 属性设置为 table-cell,并将 text-align 设置为 center,vertical-align 设置为 middle。代码如下:
<div class="box">
<img src="avatar.jpg">
</div>
.box {
width: 280px;
height: 280px;
border: 1px solid #bbb;
display: table-cell;
text-align: center;
vertical-align: middle;
}
注意:该方法不兼容 IE6 / IE7。
方法 ③
给容器样式的 text-align 属性设置为 center,并添加辅助子元素span,同时设置图片样式的 vertical-align 属性为 middle,该子元素样式的 display 属性设置为 inline-block,height 设置为 100%,vertical-align 设置为 middle。代码如下:
<div class="box">
<img src="avatar.jpg">
<span></span>
</div>
.box {
width: 280px;
height: 280px;
border: 1px solid #bbb;
text-align: center;
}
.box img {
vertical-align: middle;
}
.box span {
display: inline-block;
height: 100%;
vertical-align: middle;
}
经测试,在所有浏览器都能实现图片水平垂直居中。
改进:给容器样式的 text-align 属性设置为 center,并设置 :before 伪元素的 content 属性为空,display 设置为 inline-block,height 设置为 100%,vertical-align 设置为 middle,同时设置图片样式的 vertical-align 属性为 middle。代码如下:
<div class="box">
<img src="avatar.jpg">
</div>
.box {
width: 280px;
height: 280px;
border: 1px solid #bbb;
text-align: center;
}
.box:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.box img {
vertical-align: middle;
}
TIPS: 使用 :before 伪元素设置样式,可以避免添加多余HTML代码,如 span 子元素。
注意:改进后的方法不兼容 IE6 / IE7。
|