文档章节

图片垂直居中(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

没有更多内容

加载失败,请刷新页面

加载更多

Snackbar源码分析

目录介绍 1.最简单创造方法 1.1 Snackbar作用 1.2 最简单的创建 1.3 Snackbar消失的几种方式 2.源码分析 2.1 Snackbar的make方法源码分析 2.2 对Snackbar属性进行设置 2.3 Snackbar的show显示...

潇湘剑雨
14分钟前
1
0
分布式作业系统 Elastic-Job-Lite 源码分析 —— 作业数据存储

分布式作业系统 Elastic-Job-Lite 源码分析 —— 作业数据存储 摘要: 原创出处 http://www.iocoder.cn/Elastic-Job/job-storage/ 本文基于 Elastic-Job V2.1.5 版本分享 1. 概述 本文主要分享...

DemonsI
21分钟前
1
0
jmockit demo

1、@Mocked,标识一个指定的class的实例或被测对象的参数被Mock掉。 2、@Capturing,标识一个被Mock的对象,从该对象派生的子类也被Mock了。 3、@Injectable,标识只有一个指定的被测对象的内...

我的老腰啊
34分钟前
1
0
内容换行

用 <textarea>13611112222 这里想换行 13877779999</textarea><textarea>13611112222 13877779999</textarea>...

小黄狗
36分钟前
1
0
学习设计模式——单例模式

1. 认识单例模式 1. 定义:一个类中仅有一个实例,并提供一个访问它的全局访问点。 2. 结构:仅一个Singleton类,其中包含一个static类变量,而类变量的类型就是Singleton类,而且Singleton...

江左煤郎
43分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部