文档章节

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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

[雪峰磁针石博客]软件测试专家工具包1web测试

web测试 本章主要涉及功能测试、自动化测试(参考: 软件自动化测试初学者忠告) 、接口测试(参考:10分钟学会API测试)、跨浏览器测试、可访问性测试和可用性测试的测试工具列表。 安全测试工具...

python测试开发人工智能安全
今天
2
0
JS:异步 - 面试惨案

为什么会写这篇文章,很明显不符合我的性格的东西,原因是前段时间参与了一个面试,对于很多程序员来说,面试时候多么的鸦雀无声,事后心里就有多么的千军万马。去掉最开始毕业干了一年的Jav...

xmqywx
今天
2
0
Win10 64位系统,PHP 扩展 curl插件

执行:1. 拷贝php安装目录下,libeay32.dll、ssleay32.dll 、 libssh2.dll 到 C:\windows\system32 目录。2. 拷贝php/ext目录下, php_curl.dll 到 C:\windows\system32 目录; 3. p...

放飞E梦想O
今天
0
0
谈谈神秘的ES6——(五)解构赋值【对象篇】

上一节课我们了解了有关数组的解构赋值相关内容,这节课,我们接着,来讲讲对象的解构赋值。 解构不仅可以用于数组,还可以用于对象。 let { foo, bar } = { foo: "aaa", bar: "bbb" };fo...

JandenMa
今天
1
0
OSChina 周一乱弹 —— 有人要给本汪介绍妹子啦

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子 :分享水木年华的单曲《中学时代》@小小编辑 手机党少年们想听歌,请使劲儿戳(这里) @须臾时光:夏天还在做最后的挣扎,但是晚上...

小小编辑
今天
54
8

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部