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

记录一下:

采用 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后,使用此方法实现垂直居中。

来源:张鑫旭的博客

时间: 2024-12-29 17:19:41

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

CSS制作图片水平垂直居中 亲测推荐

空白标签实现图片的垂直居中 这种方法很有意思,也很有独特之处,我的思路也是来自于张鑫旭-鑫空间-鑫生活写的<大小不固定的图片.多行文字的水平垂直居中>一文中的使用空白图片实现垂直对齐.他主要使用了一张宽度为1px高度为100%的透明图片,并设置图片“vertical-align:middle”.后来我想了想,此处能不能不使用图片,直接像上面的实例一样,用一个空格的span标签,只是将其“display:inline”设置为“display:inline-block”.因为这两者的核心原理都是一

解读CSS布局之-水平垂直居中

原文链接:http://f2e.souche.com/blog/jie-du-cssbu-ju-zhi-shui-ping-chui-zhi-ju-zhong/ 对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.由于我们大搜车的日常工作中已经不再需要理会低版本IE,所以本文所贴出的方法,是没有去考虑IE的,如果有兼容需要,可以参见这篇文章:http://www.cnblogs.com/Dudy/p/4085292.ht

CSS布局:元素垂直居中

CSS布局之元素垂直居中 本文将依次介绍在不同条件下实现垂直居中的多种方法及简单原理 Tip:下文中说的适用场景只是举了几个简单的例子方便读者理解.实际应用场景太复杂,生搬硬套容易出错.最重要的是掌握各种方法能够实现居中的原理.只要掌握了原理,那么不管问题怎么变都可以根据自己的理解选择合适的方法. 一.使用line-height 1.原理 ? 有行高的元素,内容会默认显示在行高的垂直中心处,通过设置行高等于父元素的高度,可以达到内容在父元素中垂直居中的效果 2.实现步骤 (1)父元素有一个确定的

css自适应高度下垂直居中文字

****  首先讲讲ionic下的样式设置,ionic下是按功能将样式作用域划分成模块,模块内元素对应父模块的样式,而再是全局body...继承了  **** 1.关于css自适应高度下垂直居中文字,非定位类(position会影响性能,能优则优)的方法实现 : 分析:使用vertical-align方法可以使元素垂直居中,但是只是针对支持vertical的元素,如table .td 等,div和span是不支持的,所以要模拟table元素. --->   父元素设置display : tabl

div垂直居中 css div盒子上下垂直居中

div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中. div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div css让这个登录布局水平和css垂直居中. 这里介绍一种最简单兼容性最好的水平居中与上下垂直居中的方法. 1.具体实例代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> &

Flexbox制作CSS布局实现水平垂直居中

Flexbox实现一个div元素在body页面中水平垂直居中: <!DOCTYPE html><html lang="en"><head>  <meta charset="utf-8"/>  <title>Flexbox制作CSS布局实现水平垂直居中</title>  <style type="text/css">    html {      height: 1

利用vertical-align:middle垂直居中

以前总是以为vertical-align与text-align是同样的道理,一个是垂直居中,一个是水平居中,结果在这里一点效果也没有.事实上vertical-align与text-align完全不一样,vertical-align不能这样用. vertical-align 属性设置元素的垂直对齐方式.该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐.允许指定负长度值和百分比值.这会使元素降低而不是升高.在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式.默认值:baselin

css实现水平居中和垂直居中的常见方式

我们在实际工作中常会遇到需要设置居中的场景,居中分为水平居中和垂直居中.针对不同的情况又有不同的实现方式,例如行内元素和块状元素. 水平居中: 行内元素:text-align:center://这个比较简单 块状元素:定宽的块状元素通过设置左右margin为auto实现,例如margin:10px auto:不定宽的块状元素:加入 table 标签后按照定宽元素进行设置:设置 display: inline 后按照行内元素设置:设置position:relative left:50% 通过给父元

css样式大全(copy自一个大佬的博文)

原文地址: https://www.cnblogs.com/wangjian8888/p/6092158.html. 字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常) 行高 {line-height: normal;}(正常) 单位:PX.PD.EM 粗细 {font-weig