DIV+CSS如何让文字垂直居中

div { 
height:25px; 
line-height:25px; 
overflow:hidden; 
} 
这段代码很简单，后面使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行，这样就达不到垂直居中效果了。 

 

<!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> 
<title> 单行文字实现垂直居中 </title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style type="text/css"> 
body { font-size:12px;font-family:tahoma;} 
div { 
height:25px; 
line-height:25px; 
border:1px solid #FF0099; 
background-color:#FFCCFF; 
} 
</style> 
</head> 
<body> 
<div>现在我们要使这段文字垂直居中显示！</div> 
</body> 
</html> 
不过在Internet Explorer 6及以下版本中，这和方法不支持对图片设置垂直居中。
posted @ 2011-03-25 09:59  北美上映  阅读(259)  评论(0)    收藏  举报