您现在的位置是:首页 > 其他

李清波 2014-04-24 其他 31561 复制当前网址

CSS 上下居中3种方案

<center>在CSS里不好使了,在CSS里 解决上下居中问题又能支持both IE和Firefox的有3种方案:

第一种,上下居中文字:
方法是使用line-height,因为line-height就是用来定义文字行与行之间的距离,所以定义文字框的line-height等于框的高度可以让文字上下居中.

h1 {  
   font-size: 3em;  
   height: 100px;  
   ;  
   }

需要注意的是:如果中间的文字不只一行,并且使用分行显示的时候,这个就不好用了.


第二种,非文字的上下居中:
使用absolute positioning,需要注意的是这个方法只能在框有定义好的高度才能工作. 不适合动态高度的框.


假如代码为:

	Hi, I'mVertically 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;}


文章来源:https://liqingbo.com/blog-189.html

评论