|line-height与line boxes高度
撑开行高度的是line-height(line-boxes),而不是字体大小
代码:
效果:
注:如果元素内没有内容,则不会撑开高度,因为line-boxes为0,即使指定了line-height也是不行的,只要有内容,行高就生效(下面的多行垂直居中的p的line-height就是这个道理)
|单行文字的垂直居中对齐
"把line-height值设置为height一样大小的值可以实现单行文字的垂直居中",这句话可以换成“把line-height设置为您需要的box的大小可以实现单行文字的垂直居中”,优点 在于去掉height
代码:
效果:
|多行文字的垂直居中
要实现高度不固定的文字垂直居中使用padding就好了。对于高度固定的div,里面文字单行或多行显示,字体大小有大有小的情况怎么办呢?方法之一就是借助于line-height。
line boxes的高度取决于它的下属职员的最高高度。而这个高度由一个不占据任何空间的空格完成,方法即使设置font-size为0,line- height为所需要的高度。同时,我们为了分隔line boxes,同时要保持在一行上,需要设置display属性为inline-block
css代码:
.mulit_line{ line-height: 150px; background: #0af; padding-left: 5px; }
.mulit_line_span{ display: -moz-inline-stack; display: inline-block; line-height: 1.4em; vertical-align: middle;}
.mulit_line_i{ width:0; display: -moz-inline-stack; display: inline-block; vertical-align: middle; font-size: 0;}
html代码:
<p class="mulit_line">
<span style="font-size:12px;" class="mulit_line_span">这里是高度为150像素的标签内的多行文字,文字大小为12像素。<br />这里是第二行,用来测试多行效果。</span>
<i class="mulit_line_i"> </i>
</p>
效果:
(<i>的意思是我的行高为150px,我垂直居中,你跟我是同一行的,所有你也得跟我一样垂直居中;)
补充有关于让所有标签在各个浏览器下(ff1-3,IE6-8,chrome,opera)都实现类似display:inline-block的写法:
display:-moz-inline-stack;display:inline-block;*display:inline;zoom:1;
说明:让行内元素(span,a标签等实现类似inline-block的效果),display:-moz-inline-stack;display:inline-block;就足够了。
要实现块状元素的inline-block,需要用到display:-moz-inline-stack;display:inline-block;*display:inline;zoom:1;
全部,其中display:-moz-inline-stack;display:inline-block;针对firefox,chrome,opera,IE8,而*display:inline;zoom:1;针对IE6和IE7。
|使用行高代替高度避免haslayout
在某些情形下,line-height可以和height互换,因为实现的效果一样。都能撑开一个高度,然而这两个css属性有一个较隐蔽的差异,就是使用height会使标签haslayout,而使用line-height则不会。
IE6,IE7下,类似inline-block属性的元素里如果有block属性的元素,如果该block haslayout,则该标签会冲破外部inline-block的显示而宽度100%显示,从使按钮自适应文字大小的效果失效,解决方法就是使用 line-height代替height。
CSS代码
.out{display:inline-block; background:#a0b3d6; margin-top:20px;}
.in1{display:block; height:20px;}
.in2{display:block; line-height:20px;}
HTML代码
<span class="out">
<span class="in1">height:20px;</span>
</span>
<span class="out">
<span class="in2">line-height:20px;</span>
</span>
效果:、
前者冲破限制,宽度直接100%,后者自适应内部文字
(文章参考张鑫旭博客,自己总结一下,方便日后查阅)