当前位置:清晨 » 站长笔记 » Div中内容垂直居中

Div中内容垂直居中

发布日期:2013年5月10日 12:05:41

点击量: 5,225

在网站界面调试的时候,时常会遇到div居中的问题。而垂直居中是有点小窍门的。
请看。
使用行高(line-height):
使用line-height内容行高等于DIV高度即可。
代码例子:

text-align: center;
line-height: 90px;

我通常都是用这种方法解决问题的。

------------分隔线--------------

下面附网上看到的一些方法:
原文:http://dreamweaver.abang.com/od/divcss/a/vertical-align.htm
虽然Div布局已经基本上取代了表格布局,但表格布局和Div布局仍然各有千秋,互有长处。比如表格布局中的垂直居中就是Div布局的一大弱项,不过好在千变万化的CSS可以灵活运用,可以制作出准垂直居中效果,勉强过关。

要让div中的内容垂直居中,无非有以下几种方法,等我一一列举:
一、行高(line-height)法
如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如:

 
p {
 height:30px;
 line-height:30px;
 width:100px;
 overflow:hidden; }

这段代码可以达到让文字在段落中垂直居中的效果。
二、内边距(padding)法
另一种方法和行高法很相似,它同样适合一行或几行文字垂直居中,原理就是利用padding将内容垂直居中,比如:

p {
 padding:30px; 
}

这段代码的效果和line-height法差不多。
三、模拟表格法
模拟表格法其实就是用CSS中对元素的声明让块元素像表格一样显示,用到的CSS属性有display、vertical-align等。 先看下面的Html代码:

 
<div id="box">
 <div id="content">居中显示</div>
</div>

参照以上Html代码,让最外面名为box的Div呈表格样式显示,然后再让box中名为content的Div呈单元格显示,并利用vertical-align:middle让其垂直居中,这样就模拟出来和表格一样的显示方式,CSS代码如下:

 
#wrap {
 height:400px;
 display:table; 
} 
#content {
 vertical-align:middle;
 display:table-cell;
 border:1px solid #FF0099;
 background:#000;
 width:400px; 
}

但这种方法有一个弊端,由于IE浏览器对高度理解会产生错误,所以这种方法仅对Firefox有效,对IE无效,既然这样,我们就需要找出对IE的修正方法,于是有了另外一种方法。
四、定位法
顾名思义,定位法是利用CSS定位属性position对元素进行定位的方法,也属于模拟方法,不过它对IE的支持还是不错的。 它的Html代码为:

<div id="box">
 <div id="sub">
 <div id="content">垂直居中</div>
 </div> 
</div> 

这段代码比上一种方法中多出了一个名为sub的Div,它的作用是用来定位,原理就是:首先让box出于相对定位,sub相对box出于相对定位,位于box垂直方向的50%,再让content中的真正内容出于sub垂直方向的-50%,从而制作出content在box中垂直居中的效果,它们的CSS代码如下:

#wrap {
  border:1px solid #000;
 background:#F00;
 width:400px;
 height:400px;
 position:relative; 
} 
#subwrap {
 position:absolute;
  top:50%; 
} 
#content {
 border:1px solid #000;
 position:relative;
 top:-50%;
 color:#FFF; 
}

这段代码无论是在IE中还是Firefox中,都能正常居中了。
-----------分隔线----------------

至此,本文结束。

老薛主机专属优惠码: PT ,有需要购买的同学可以使用.可享受30%的优惠.