您的位置：首页 > 其它

小经验：display：table 和 vertical-align：middle 控制 块元素垂直居中

2012-08-08 18:35 393 查看
见代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTMLiveCode</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style type="text/css">
div{
width:200px;
height: 200px;
border:1px red solid;
display:table;　　// 父元素设置为table
}
p{
width:100px;
height:100px;
border:1px blue solid;
word-break:break-word;
display:table-cell;　　　　// 居中的地方设置为table-cell
vertical-align:middle;   // 居中
text-align: center;
}
</style>
<script type="text/javascript">

</script>
</head>
<body>
<div class="a">
<p>ddddddddddddddddddddddddddssssssssssssssssssssssssssssssssssssssssssssssssssssssd</p>
</div>
</body>
</html>


结果见图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航