文档章节

css vertical-align:middle; 垂直居中的一个推荐方式(IE7+)(个人喜欢)

山哥
 山哥
发布于 2015/11/07 11:14
字数 227
阅读 1081
收藏 3

记录一下:

采用 inline-block 方法:

HTML:

<div id="box">

<div id="content">我是内容<br />我也是内容</div>        

<i class="_actor"></i>

</div>

CSS:

#box { height: 400px; background: #c00;}

#content { display: inline-block; *display: inline; *zoom:1; vertical-align: middle;}

#content { font-size: 12px; color: #fff;}

._actor { width:0; font-size:0; height: 100%; display: inline-block; *display: inline; *zoom:1; vertical-align: middle;}

加粗体的部分是关键所在。

原理是:都显示为行框的高度由最高的行内框决定。

i._actor作为演员,高度指定和父元素一致。

兼容性:支持inline-block的浏览器均可。

对于IE6/7,可以先使用hack方式使其支持 inline-block后,使用此方法实现垂直居中。

来源:张鑫旭的博客


© 著作权归作者所有

山哥

山哥

粉丝 248
博文 355
码字总数 136865
作品 0
南京
程序员
私信 提问
16种方法实现水平居中垂直居中

熟悉水平居中和垂直居中的方法, 不为别的, 就为用的时候能够信手拈来. 下面直接步入正题. 水平居中 若是行内元素, 给其父元素设置 text-align:center,即可实现行内元素水平居中. 若是块级元素...

tomzhangto
2017/12/19
0
0
CSS进阶(8)—— 内联元素的掌管者line-height和vertical-align(下)

上一章主要讲了line-height相关的知识,本章就来聊聊同样无处不在的vertical-align。vertical-align和line-height一样,都会影响元素在与水平流垂直方向上的表现,因此了解这两个属性,对于我...

闲人王昱珩
06/18
0
0
DIV+CSS让文字垂直居中

也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,...

晨曦之光
2012/05/16
209
1
CSS 兼容总结及面试问题

CSS 兼容总结及面试问题 +1、如何定义高度很小的容器? 原因:在IE6下无法定义小高度的容器,是因为有一个默认的行高。 解答:列举2种解决方案:overflow:hidden 或 line-height:0 +2、图片下...

南宫天明
2012/08/30
635
1
css实现水平居中和垂直居中及其浏览器兼容性

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

黄梦巍
2013/08/08
706
0

没有更多内容

加载失败,请刷新页面

加载更多

数据流中的中位数

吐出的较小的N/2 个,都在大根堆里,较大的 N/2 个,都在小根堆里。 此时 5、4,都在大根堆,小根堆没有数。 此时应该从大根堆的堆顶弹出来,扔到小根堆里。 比如:先把 5 拿出来,再把堆最后...

Garphy
刚刚
0
0
微服务下配置管理中心 SCCA

SCCA 简介 SCCA 全称 spring-cloud-config-admin,微服务下 Spring Boot 应用(包含 Spring Cloud)统一的配置管理平台。 Github 地址:spring-cloud-config-admin 核心贡献者:程序员DD | ...

SpringForA
3分钟前
2
0
spring 是如何注入对象的和bean 创建过程分析

文章目录: beanFactory 及 bean 生命周期起步 BeanFactory refresh 全过程 BeanFactoryPostProcessor 和 BeanPostProcessor 解析 使用 BeanPostProcessor 实现 aop 和 springboot Cache 相关......

sanri1993
6分钟前
2
0
@PathVariable使用

public interface ProductInfoRepository extends JpaRepository<ProductInfo, String>{ List<ProductInfo> findByProductId(String productId);} ProductInfoController @Autowired ......

观海562
17分钟前
2
0
利用CSS禁止手机长按出现气泡: 复制、选择等功能

可以用 * ,也可作用于一个div div{  -webkit-touch-callout:none;  /*系统默认菜单被禁用*/  -webkit-user-select:none; /*webkit浏览器*/  -khtml-user-select:none; /*早期浏览...

蓝小驴
57分钟前
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部