【下载文档:  css实现文字垂直居中的代码第1_2页.txt 】

---

css实现文字垂直居中的代码第1/2页
CSS中怎样设置才能使对象中的文字垂直居中于对象，这个问题也是捆扰很多朋友的难题。现在网上的很多代码都做不到浏览器兼容。我把网上有关的方法整理了一下，做了些改动，完全可以兼容各主流浏览器。 下面具体说一下在不同情况下垂直居中的方法。 一、一行文字垂直居中 看一下下面的代码： 复制代码 代码如下: 方法：line-height:20px。设置相同的行高和对象高度。 说明：这种设置简单又兼容各种浏览器，支持内联对象。但如果是固定高度的对象，只能显示一行。当有两行文字时，如果不设置“overflow:hidden”会把对象撑开。 二、多行文字，且高度自适应 请看下面的代码：
脚本之家-www.jb51.net-css垂直居中
function sel(id) {switch(id) {case "1":document.getElementById("sub").innerHTML = "三行文字垂直居中，设置相同的内上边距padding-top和内下边距padding-bottom就可以。";break;case "2":document.getElementById("sub").innerHTML = "两行文字垂直居中，设置相同的内上下边距padding-top和padding-bottom就可以。";break;case "3":document.getElementById("sub").innerHTML = "一行文字垂直居中，内上下边距相同。";break;}}
#all {
float:left;
width:240px;
padding:10px;
font-size:12px;
color:#FFF;
background-color:#CCC;
}
#sub {
float:left;
width:230px;
padding:10px 5px;
background-color:#F90;
}
#sel {
clear:both;
padding-top:5px;
width:260px;
}
select {
width:260px;
}
三行文字垂直居中，设置相同的内上边距padding-top和内下边距padding-bottom就可以。
三行文字垂直居中两行文字垂直居中一行文字垂直居中
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]方法：padding-top:10px; padding-bottom:10px。设置相同的上下内边距。 说明：兼容各种浏览器，支持内联对象，同时又支持非文本对象，如img。但有一个缺点就是对象的高度不能固定。
12下一页阅读全文