布局水平居中:使用inline"/>
css布局水平居中:使用inline
步骤:
<!-- 使用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>
更多推荐
css布局水平居中:使用inline
发布评论