div的居中

来源：互联网发布：我的世界pe村民交易js 编辑：程序博客网时间：2024/06/01 17:58

1.讲解:

外层div设置text-align:center只对文本元素起作用,对div不起作用

内层div设置style="margin:0 auto;"则可以让内层div居中显示

2.代码:

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title>    <style>        .red {border:1px solid red;}        .green {border:1px solid green;}        .hw200 {            width:200px;            height:200px;        }    </style></head><body>    <div style="text-align:center">        <span class="green">这是一个文本</span>    </div>     <div style="text-align:center">        <div class="red hw200">这是一个div</div>    </div>    <div style="">        <span class="green">这是一个文本</span>        <div class="red hw200" style="margin:0 auto;">这是一个div</div>    </div>    <div style="text-align:center">        <span class="green">这是一个文本</span>        <div class="red hw200" style="margin:0 auto;">这是一个div</div>    </div></body></html>

3.效果图:

0 0