图片垂直居中(2015-12-11更新)
图片垂直居中(2015-12-11更新)
一行代码 发表于2年前
图片垂直居中(2015-12-11更新)
  • 发表于 2年前
  • 阅读 79
  • 收藏 3
  • 点赞 0
  • 评论 0

标题:腾讯云 新注册用户域名抢购1元起>>>   

摘要: 四种情况下的图片垂直居中问题
#main{
  position:fixed;
  height:80%;
  width:100%;
  top:10%;
}
.c,.p{
  border:1px #000 solid;
  width:20%;
  height:80%;
  float:left;
  font-size:0;/*去掉字符间距*/
  text-align:center;
}
.c>img:first-child{
  height:100%;
  width:0
}
.p{
  height:500px;
  line-height:500px;
}
.c>img,.p>img{
  max-width:100%;
  max-height:100%;
  /*display:block;
  margin:0 auto;*/
  display:inline-block;
  vertical-align:middle;
}
<div id="main">
 <div class="c">
  <img />
  <img src="1.png"/>
 </div>
 <div class="c">
  <img />
  <img src="2.png"/>
 </div>
 <div class="p">
  <img src="3.png"/>
 </div>
 <div class="p">
  <img src="4.png"/>
 </div>
<div>

首先是水平居中的问题,这个问题比较好解决,这里有两种方法:

  1. 对img元素使用display:block;margin:0 auto;

  2. 在父元素上使用text-align:center,并且img元素设为display:inline(默认),同时为了去掉间距,可以使用font-size:0;

然后是垂直居中的问题,这里的解决方法要求父容器是固定的大小的(不随子元素的变化而变化),即有设置height和width,例如设置:width:100%,height:80%;

分为四种情况:

1.container大小确定、img大小确定

    对于这种情况可以直接设置margin或padding

2.container大小不确定,img大小确定

    对于这种情况可以使用定位的方法解决,父元素设为position:relative;img元素设为

position:absolute;
left:50%;
top:50%;
margin-left:-(0.5width);
margin-top:-(0.5height);
3.container大小确定,img大小不确定

    这种情况见上面例子的p类元素,即使用文本居中的办法即设置(父元素)height等于line-height和(img元素)vertical-align:middle,要注意的是img为inline(或inline-block)类型。

2015-12-11更新:

对于DOCTYPE 声明不是<!DOCTYPE html>而是<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

的情况,需要在p标签里添加一些文本,如:

.p:before {

    content: ".";

    visibility: hidden;

    font-size:1px;/*因为p元素指定了font-size:0;兼容ie*/

}

对于360安全浏览器极速模式,可以指定content的内容为空字符串,或者不指定font-size。

这时如果img的宽度为100%的话,还需要设置img的margin为 margin-left:-1px; 这个数值等于font-size的值,但是这样的做法

无法兼容所有主流的浏览器。

4.container大小不确定,img大小不确定

    这种情况可以使用一个空的img元素来将行高设为父元素高度的100%,如例子中的c类元素,空的img元素可以设为width:0;height:100%

    需要注意浏览器兼容性问题,即(每一层)父容器要明确设置height,如height:100%,这样img的max-height:100%才会正确地限制在父容器里,

另:可以使用js来实时获取container和img的大小,将问题转化为情况1-3。

效果图:

 参考:

http://www.zhangxinxu.com/wordpress/2009/08/大小不固定的图片、多行文字的水平垂直居中/大小不固定的图片、多行文字的水平垂直居中/

标签: 图片居中
共有 人打赏支持
粉丝 2
博文 16
码字总数 13190
×
一行代码
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: