margin: 0px auto; center 行类 块级

<html>
<head>
<title>
 biaoti
</title>
</head>
<body style="border:1px solid red;">
<div style="width:500px;border:1px solid red;">
<span style="border: 1px solid black;
    height: 500px;
    width: 500px;">
margin: 0px auto;  要求是本元素 是块级元素 随父元素居中(按父元素的宽高来居中的 虽然父元素占一行)  父元素也要是块级元素 父元素要是行类元素 按父亲的父亲的元素 <br/>
只有 块级元素 才能设置宽高 <br/>
块级元素 占一行   设置了宽高  内容区间按宽高来算 但还是占一行  (严格来说 也不能说占一行 应该是占父元素宽的一行)<br/>
行类元素 按行来占 不能设置宽高
</span>
<div style="border: 1px solid red; width:50;height:50;margin: 0px auto;">  
4545
       <div style="border: 1px solid red; width:10px;height:10px;margin: 0px auto;"></div>
</div>








<div style="border: 1px solid red; width:50;height:50;">
</div>
</div>

<center style="    border: 1px solid red;"><span style="border: 1px solid black;">4545</span></center>
<center style="    border: 1px solid red;"><div style="border: 1px solid red; width:10px;height:10px;margin: 0px auto;"></div></center>
center标签 块级标签 设置居中(块级 行类 都行)  



<div style="width:500px;height:500px;border: 1px solid red;">
<center style="border: 1px solid red;"><span  style="border: 1px solid black;">4545</span></center>
<center style="border: 1px solid red;"><div style="border: 1px solid red; width:10px;height:10px;margin: 0px auto;"></div></center>
</div>
//设置center 父标签 内容宽500px;  就按父标签 内容宽 居中   和 margin: 0px auto; 居中一样<br/>
红为 块级   黑为行类
</body>
</html>

 

posted @ 2018-08-27 11:41  ~雨落忧伤~  阅读(67)  评论(0编辑  收藏  举报