CSS多行文字/单行文字垂直居中的方法
注意：在外层容器是固定高度，这才使效果得以实现。
其大概原理为：第一个alert_blank容器，display:inline以后作为行内元素，它的高度为100%，宽度却为0，相当于紧贴外层容器左边框的一条透明的线，这样就使得外层容器里面只存在一行。
外层容易的vertical-align:middle使得其内部相当于一行文字垂直居中。真正盛放内容的div也是display:inline，它对外和blank垂直居中，只要内部文字不超过blank的高度，这个效果将是完美的。
虽然从语义化上讲，用空白div布局说不太过去，但是瑕不掩瑜。另：zoom:1是为了触发hasLayout。
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>CSS多行文字/单行文字垂直居中的方法</title>
<style type=”text/css”>
.alert{
width:400px;
height:250px;
display:table-cell;
vertical-align:middle;
border:1px solid #f00;
}
.alert_blank, .alert_con{
height:100%;
width:0;
display:inline;
vertical-align:middle;
zoom:1;
background:#0f0;
}
.alert_con{ width:100%; height:auto; }
</style>
</head>
<body>
<div class=”alert”>
<div class=”alert_blank”></div>
<div class=”alert_con”>哥乃多行文字垂直居中～哥乃多行文字垂直居中～哥乃多行文字垂直居中～哥乃多行文字垂直居中～</div>
</div></body>
</html>
文章作者：admin
本文地址：http://www.cookseo.com/393.html
版权所有：网站SEO-网站优化 © 转载时必须以链接形式注明作者和原始出处！
你给我回复了？好像没收到邮件
链接没给我加，我的加过了你
晕，忘了，年纪大了。
我给你回复，你能收到邮件不能？