文档章节

图片垂直居中(2015-12-11更新)

一行代码
 一行代码
发布于 2015/12/03 15:07
字数 724
阅读 97
收藏 3
#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
博文 18
码字总数 13190
作品 0
中山
私信 提问
CSS让图片垂直居中的几种技巧

在网页设计过程中,有时候会希望图片垂直居中的情况。而且,需要垂直居中的图片的高度也不确定,这就会给页面的布局带来一定的挑战。下面总结了一下,曾经使用过的几种方法来使图片垂直居中,...

科技小能手
2017/11/12
0
0
CSS3常用知识

1.文本超出部分显示为... white-space:nowrap;text-overflow:ellipsis;-o-text-overflow:ellipsis;overflow: hidden; 2.文本超出多行结尾部分展示为... height: 46px; //它的值为行高乘以显示...

kouxiaomou
2017/02/24
0
0
前端技术之CSS实现图片垂直居中

前端技术之CSS实现图片垂直居中技术 maybe yes 发表于2015-03-14 18:52 原文链接 : http://blog.lmlphp.com/archives/86/Thefront-endtechnologypureCSStoachieveimagevertically 来自 : LM......

hosser
2015/05/15
0
0
一些CSS方面的知识

1.学习CSS"盒子模型"(上):http://www.108js.com/article/article8/80058.html?id=1766 2.学习CSS"盒子模型"(下):http://www.108js.com/article/article8/80059.html?id=1767 3.css知多......

IT追寻者
2016/06/23
31
0
css实现水平居中和垂直居中及其浏览器兼容性

不管是在网站的布局还是显示图片,需要水平居中和垂直居中的情况是很常见的。今天我们就开始对css的水平居中和垂直居中的一些常见方法在各种浏览器下进行测试和归纳。 浏览器说明:本文涉及到...

黄梦巍
2013/08/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

mysql密码重置

方法一: 在my.ini的[mysqld]字段加入: skip-grant-tables 重启mysql服务,这时的mysql不需要密码即可登录数据库 然后进入mysql mysql>use mysql; mysql>更新 update user set password=pas...

architect刘源源
16分钟前
2
1
SpringBoot + Mybatis 配置多数据源(Srping boot 二)

前置条件,你已经配置好spring boot+mybatis,可以参考之前的博客 实现逻辑通过注解+aop切面编程来动态更新datasource 第一步,配置多个DataSource server: port: 8080freezing: ...

小海bug
28分钟前
11
0
连续潜在变量---概率PCA

最大似然PCA 用于PCA的EM算法 贝叶斯PCA 因子分解

中国龙-扬科
35分钟前
5
0
Mac 安装redis 及 redis desktop manager

1.安装redis 1.1 下载地址: http://download.redis.io/releases/ 1.2 本地新建个redis文件夹 1.3 切换到redis 安装下:cd /Users/用户名/Documents/redis/redis-3.2.5 1.4 make install 1.5......

qimh
40分钟前
3
0
Caffe(二)-Python-自定义网络

这里我们用一个例子先来体验一下 首先定义一下我们的环境变量 $PYTHONPATH,我这儿是Windows开发环境,至于Windows Caffe怎么编译由读者自己下去搞定 我使用的控制台是 Windows PowerShell 添...

Pulsar-V
今天
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部