<center>在CSS里欠好使了,在CSS里 处理上下居中问题又能支持both IE和Firefox的有3种方法:
第1种,上下居中文字:
办法是运用line-height,由于line-height便是用来定义文字行与行之间的距离,因此定义文字框的line-height等于框的高度能够让文字上下居中.
h1 {
font-size: 3em;
height: 100px;
}
必须重视的是:倘若中间的文字不只一行,并且运用分行表示的时候,这个就欠好用了。
第二种,非文字的上下居中:
运用absolute positioning,必须重视的是这个办法只能在框有定义好的高度才可工作. 不适合动态高度的框. 假如代码为:
Hi, ImVertically Aligned
Abigo sudo mara paulatim odio, accumsan luptatum nibh nibh refero metuo opes ut fatua.
要上下居中 CSS编写为:
.vert {
width: 580px;
height: 190px;
position: absolute;
top: 50%;
left: 50%;
margin: -95px 0 0 -290px;
}
上边的margin计算公式为:
* Width of Element / 2 = Negative Left Margin
* Height of Element / 2 = Negative Top Margin
第三种办法:
Content here#floater{float:left; height:50%; margin-bottom:-120px;}
#content{clear:both; height:240px; position:relative;}
|