文档章节

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

一行代码
 一行代码
发布于 2015/12/03 15:07
字数 724
阅读 95
收藏 3
点赞 0
评论 0
#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
作品 0
中山
CSS让图片垂直居中的几种技巧

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

科技小能手 ⋅ 2017/11/12 ⋅ 0

CSS3常用知识

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

kouxiaomou ⋅ 2017/02/24 ⋅ 0

前端技术之CSS实现图片垂直居中

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

hosser ⋅ 2015/05/15 ⋅ 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 ⋅ 0

css实现水平居中和垂直居中及其浏览器兼容性

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

黄梦巍 ⋅ 2013/08/08 ⋅ 0

css之技巧和经验

说明:本文档兼容性测试基础环境为:windows系统;IE6-10, Firefox4-17, Chrome16-23, Win Safari5.1.7, Opera11.5-12.5 CSS技巧和经验列表(*以下实例默认运行环境都为Standard mode): 如...

假行僧396741 ⋅ 2017/01/14 ⋅ 0

CSS常用小技巧

一、使用行高来实现垂直居中 elm { height: 24px; line-height: 24px; } 当你有一个固定高度的容器时,并且只有单行内容,此时要实现元素的垂直居中,最好的办法就是设置元素的line-height和...

奔小康 ⋅ 2013/01/31 ⋅ 2

CSS定位问题(3):相对定位,绝对定位

引子: 开始的时候我想先要解决一个问题,怎么设置一个div盒子撑满整个屏幕? 看下面的html代码: XHTML 1 2 3 4 5 <body> <div id="father-body"> <div class="item1"></div> </div> </bod......

-鹏 ⋅ 2016/05/04 ⋅ 0

html5 图片与文字中间对齐处于同一行、或者图片与按钮处于同一行

在日常开发中,经常会使用到图片与文字或图片与按钮对齐。 1.图片与按钮 处于同一行,并居中对齐,长使用的方法如下: <div> <img src="" style="vertical-align:middle"/> <button type="bu...

突然很想飞 ⋅ 2015/12/08 ⋅ 0

CSS垂直居中

44年前我们把人送上月球,但在CSS中我们仍然不能很好实现垂直居中——@James Anderson 让一个元素水平居中对于CSS来说非常简单:如果是一个内联元素,我们可以在他的父元素上设置text-align:...

WolfX ⋅ 2016/04/25 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

如何优雅的编程——C语言界面的一点小建议

我们鼓励在编程时应有清晰的哲学思维,而不是给予硬性规则。我并不希望你们能认可所有的东西,因为它们只是观点,观点会随着时间的变化而变化。可是,如果不是直到现在把它们写在纸上,长久以...

柳猫 ⋅ 37分钟前 ⋅ 0

从零手写 IOC容器

概述 IOC (Inversion of Control) 控制反转。熟悉Spring的应该都知道。那么具体是怎么实现的呢?下面我们通过一个例子说明。 1. Component注解定义 package cn.com.qunar.annotation;impo...

轨迹_ ⋅ 37分钟前 ⋅ 0

系统健康检查利器-Spring Boot-Actuator

前言 实例由于出现故障、部署或自动缩放的情况,会进行持续启动、重新启动或停止操作。它可能导致它们暂时或永久不可用。为避免问题,您的负载均衡器应该从路由中跳过不健康的实例,因为它们...

harries ⋅ 39分钟前 ⋅ 0

手把手教你搭建vue-cli脚手架-详细步骤图文解析[vue入门]

写在前面: 使用 vue-cli 可以快速创建 vue 项目,vue-cli很好用,但是在最初搭建环境安装vue-cli及相关内容的时候,对一些人来说是很头疼的一件事情,本人在搭建vue-cli的项目环境的时候也是...

韦姣敏 ⋅ 49分钟前 ⋅ 0

12c rman中输入sql命令

12c之前版本,要在rman中执行sql语句,必须使用sql "alter system switch logfile"; 而在12c版本中,可以支持大量的sql语句了: 比如: C:\Users\zhengquan>rman target / 恢复管理器: Release 1...

tututu_jiang ⋅ 今天 ⋅ 0

Nginx的https配置记录以及http强制跳转到https的方法梳理

Nginx的https配置记录以及http强制跳转到https的方法梳理 一、Nginx安装(略) 安装的时候需要注意加上 --with-httpsslmodule,因为httpsslmodule不属于Nginx的基本模块。 Nginx安装方法: ...

Yomut ⋅ 今天 ⋅ 0

SpringCloud Feign 传递复杂参数对象需要注意的地方

1.传递复杂参数对象需要用Post,另外需要注意,Feign不支持使用GetMapping 和PostMapping @RequestMapping(value="user/save",method=RequestMethod.POST) 2.在传递的过程中,复杂对象使用...

@林文龙 ⋅ 今天 ⋅ 0

如何显示 word 左侧目录大纲

打开word说明文档,如下图,我们发现左侧根本就没有目录,给我们带来很大的阅读障碍 2 在word文档的头部菜单栏中,切换到”视图“选项卡 3 然后勾选“导航窗格”选项 4 我们会惊奇的发现左侧...

二营长意大利炮 ⋅ 今天 ⋅ 0

智能合约编程语言Solidity之线上开发工具

工具地址:https://ethereum.github.io/browser-solidity/ 实例实验: 1.创建hello.sol文件 2.调试输出结果

硅谷课堂 ⋅ 今天 ⋅ 0

ffmpeg 视频格式转换

转 Mp4 格式 #> ffmpeg -i input.avi -c:v libx264 output.mp4#> ffmpeg -i input.avi -c:v libx264 -strict -2 output.mp4#> ffmpeg -i input.avi -c:v libx264 -strict -2 -s 1......

Contac ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部