实现DIV层内的文字垂直居中

luffot 2014-03-07

有时候,为了网页设计的美观,需要把div+css设计的页面里的某些div层里的文字垂直居中,包括多行文字以及单行文字;方法有不少,但真正能实现而代码又简洁的介绍不多,flymorn就为大家介绍几种适用的div文字垂直居中的方法。

首先要知道css里vertical-align无效,W3C官方对vertical-align做了下面的解释:“Thispropertyaffectstheverticalpositioninginsidealineboxoftheboxesgeneratedbyaninline-levelelement.”

实际上,一个Box中由很多行很多元素组成,vertical-align只作用于在同一行内的元素,它的垂直并不是相对于整个Box而言的。前面定义了一个60px的高度,但是这个Box中存在很多行,那段文本并不能对齐到中央。因此希望那段文本对齐中间,需要给它定义一个line-height的属性,让line-height为60px,作用于一行的vertical-align就可以工作了。

如果是单行文字想垂直居中,只要保证div高和行高保持一致,就可以了。用下面的代码即可实现:

CSS代码:

#div-a{

height:60px;

line-height:60px;

}

XHTML代码:

<divid="div-a">

......

</div>

如果还想让div里的文字水平居中,加上“text-align:center;”即可;代码如下:

CSS代码:

#div-a{

text-align:center;

height:60px;

line-height:60px;

}

XHTML代码:

<divid="div-a">

....

</div>

说明:如果在父级元素定义TEXT-ALIGN:center;这个的意思就是在父级元素内的内容居中;对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT:auto;MARGIN-LEFT:auto;”。

但是,如果是多行文字,上面的垂直居中的方法就不行了,得用变通的方法实现;这里建议使用table方法,在table外面再套上相应的div,

代码如下:

<table>

<tr><tdstyle="vertical-align:middle;height:300px;background-color:red">

</td></tr>

</table>

多行文字居中还有另外一种方法:

多行内容居中,且容器高度可变,也很简单,给出一致的padding-bottom和padding-top就行:

.middle-demo-2

{

padding-top:24px;

padding-bottom:24px;

}

优点:

1.同时支持块级和内联极元素

2.支持非文本内容

3.支持所有浏览器

缺点:

容器不能固定高度

如何使图片在DIV中垂直居中,可以用背景的方法。如下:

body

{

BACKGROUND:url()#FFFno-repeatcenter;

}

关键就是最后的center,这个参数定义图片的位置。还可以写成“topleft”(左上角)或者"bottomright"等,也可以直接写数值"5030"。

相关推荐