`

多行文字垂直居中

 
阅读更多 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>上下居中</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
body,p,div{ margin: 0; padding: 0;}

/*For Firefox Chrome*/
.box { border:1px #ddd solid; height:300px; overflow:hidden; display:table; margin:50px; position:relative;}
.box .text{display:table-cell;vertical-align:middle;}
/*For IE7*/
*+html .box .text{ display: block; position:absolute; top:50%; width:100%; height:auto;}
*+html .box .text p{ position:relative; top:-50%;}
/*For IE6*/
*html .box .text{position:absolute; top:51%; width:100%; height:auto; display:block;}
*html .box .text p{position:relative; top:-50%;}

</style>
</head>
<body>
<div class="box">
	<div class="text">
		<p>
			这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字
		</p>
	</div>
</div>

</body>
</html>

 

分享到：
| 背景颜色获取与赋值的问题
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics