多行文字实现垂直居中

来源:互联网 发布:智能电视软件哪个好 编辑:程序博客网 时间:2024/05/14 03:45
<!DOCTYPE html> 
<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#wrap{ 
display:table; 
border:1px solid #FF0099; 
background-color:#FFCCFF; 
width:760px; 
height:400px; 

div#subwrap{ 
vertical-align:middle; 
display:table-cell; 

div#content{ 
width: 600px;

</style> 
</head> 
<body> 
<div id="wrap"> 
<div id="subwrap"> 
<div id="content">
现在我们要使这段文字垂直居中显示! 现在我们要使这段文字垂直居中显示! 现在我们要使这段文字
垂直居中显示! 现在我们要使这段文字垂直居中显示! 现在我们要使这段文字垂直居中显示! 现在我们要使这段文字垂直居中显示! 

</div> 
</div> 
</div> 
</body> 
</html> 
0 0