步骤:
<!-- 使用inline-block+text-align -->
<!-- 1.先将子框由块级元素改变为行内元素,在通过设置行内块元素居中以达到水平居中 -->
<!-- 2.具体,对子框用display:inline-block,对父框设置text-align:center -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css布局水平居中:使用inline-block+text-align</title>
<style type="text/css">
#parent{
text-align: center;
}
#son{
display: inline-block;
background-color: #7FFFD4;
width: 300px;
height: 100px;
}
/*优点: 兼容性好;
缺点: son里面的文字也会水平居中,可以使用text-algin为left还原*/
</style>
</head>
<body>
<!-- 使用inline-block+text-align -->
<!-- 1.先将子框由块级元素改变为行内元素,在通过设置行内块元素居中以达到水平居中 -->
<!-- 2.具体,对子框用display:inline-block,对父框设置text-align:center -->
<div id="parent">
<div id="son">块级元素修改为内联块级元素</div>
</div>
</body>
</html>
1098
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
