css实现文字垂直居中的代码第1/2页

CSS中怎样设置才能使对象中的文字垂直居中于对象，这个问题也是捆扰很多朋友的难题。现在网上的很多代码都做不到浏览器兼容。我把网上有关的方法整理了一下，做了些改动，完全可以兼容各主流浏览器。

下面具体说一下在不同情况下垂直居中的方法。

一、一行文字垂直居中

看一下下面的代码：

function sel(id) {switch(id) {case “1”:document.getElementById(“sub”).style.lineHeight = “normal”;break;case “2”:document.getElementById(“sub”).style.lineHeight = “20px”;break;case “3”:document.getElementById(“sub”).style.lineHeight = “28px”;break;}}

#all {

width:240px;

padding:10px;

font-size:12px;

color:#FFF;

background-color:#CCC;

}

#sub {

width:230px;

padding:0 5px;

height:20px;

overflow:hidden;

background-color:#F90;

}

#sel {

margin-top:5px;

}

select {

width:260px;

}

方法：line-height:20px。设置相同的行高和对象高度。

说明：这种设置简单又兼容各种浏览器，支持内联对象。但如果是固定高度的对象，只能显示一行。当有两行文字时，如果不设置“overflow:hidden”会把对象撑开。

二、多行文字，且高度自适应

请看下面的代码：

绿夏网-www.gimoo.net-css垂直居中

三行文字垂直居中，设置相同的内上边距padding-top和内下边距padding-bottom就可以。

三行文字垂直居中两行文字垂直居中一行文字垂直居中

[Ctrl A 全选 注:如需引入外部Js需刷新才能执行]

方法：padding-top:10px; padding-bottom:10px。设置相同的上下内边距。

说明：兼容各种浏览器，支持内联对象，同时又支持非文本对象，如img。但有一个缺点就是对象的高度不能固定。