[ CSS ] line-height 与垂直居中!

在此之前,对于line-height 与垂直居中的问题,经常碰到。 

比如,图片与span在同一个box中的时候,竟然会各种偏移。要想达到理想的效果真的是各种难。

有时间,决定认真的啃一啃。

一 line-heigth:

1. line-height: 顾名思义,行高,指代文本中,行与行之间的基线间的距离。

2. 基线: 这里的基线不是指代文字的底部,而是英文字母x 的下沿。

3 行距: 行距表示文字的高度与行高的差距。

4. 内容区域: 行中每一个元素都有一快内容区域,主要由字体的大小决定。

5 行内框: 在默认条件下,行内框是等于内容区域的。在如果设置了行高,那么,行内框就会等于行高,并且在内容区域的两侧添加空白。

6 行框: 行框在默认条件下是等于行内框,但是如果在同一行中,有行高超过了当前元素的行内框高度的时候,当前元素的行框就会默认为最高的行高的高度。

这里的行框的告诉只与本行中的最高的行高的关,与关元素的告诉无关。这也是导致图片和文字在同一行时不能对齐的原因。

7 在有图片时,图片会将行框的高度撑到图片的高度,但同时默认的对其方式为基级对齐方式。

具体如下图所示:

[ CSS ] line-height 与垂直居中!

二 vertical-align

垂直居中,这里需要注意的一点就是,vertical-align 只能对行内元素有效,对说类似div,p之类的块级元素是无效的。

需要垂直居中,只需要:vertical-align:middel


三 zoom

曾经一直很奇怪很多的网站为什么给元素总是要加一个zoom:1的样式。

原来这一切都是为了兼容ie 6/7/8 , 用来触发ie的haslayout内部属性。导致ie重新计算自身的高度。

大多数因为浮动所产生和定位问题bug 都可以用zoom来解决。


四 inline-block

inline属性的特点是,行内元素,能够在同一行内显示,但是其高度,宽度,行高,margin,padding 等元素都不能设置。所以就产生了inline-block;

inline-block行内元素,但不失block 的效果。在是在ie 6/7下没有被完全支持。

关于ie 6/7对于 inline-block的不完全支持,也可以采用上面的方法解决。

如:

display:inline-block; *display:inline; zoom:1; width:80px; height:20px; margin:10px; padding:10px; text-align:center; background:#cfc;

这样就能够使在ie 6/7中的inline元素具有inline-block的效果。

[ CSS ] line-height 与垂直居中!,布布扣,bubuko.com

[ CSS ] line-height 与垂直居中!

上一篇:Jquery对选取到的元素显示指定的长度,对于的字符串用“...”显示


下一篇:VS.NET开发工具菜单语言切换