请选择 进入手机版 | 继续访问电脑版
开启辅助访问
帐号登录 |立即注册

图片在div中水平垂直居中显示的实现方法

 
实现在固定尺寸容器内,图片水平垂直居中。

方法 ①
将容器样式的 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。


回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

友情链接
  • 艾Q网

    提供设计文章,教程和分享聚合信息与导航工具,最新音乐,动漫,游戏资讯的网站。