块状元素水平居中--过往小结(margin:0 auto / table(<tbody>、<tr>、<td>) / diplay:inline / float:left;position:relative; left:50%; left:-50% )
块状元素的水平居中分为:定宽块状元素的水平居中和不定宽块状元素的水平居中
一、定宽块状元素的水平居中:通过margin:0 auto来设置 ,例如:
div{
border:1px solid red;
width:200px;
margin:20px auto;
}
<div>我是定宽块状元素,我要水平居中显示。</div>
二、不定宽块状元素水平居中:
不定宽度的块状元素有三种方法居中:
- 加入 table 标签
- 设置 display: inline (内联元素)方法:与第一种类似,显示类型设为 行内元素,进行不定宽元素的属性设置
- 设置 position:relative 和 left:50%:利用 相对定位 的方式,将元素向左偏移 50% ,即达到居中的目的
1、加入table标签( 包括 <tbody>、<tr>、<td> ):
第一步:利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度(table其长度根据其内文本长度决定),因此可以看做一个定宽度块元素,然后再利用定宽度块状居中的margin的方法,使其水平居中。例如:
<style type="text/css"> table{ margin: 0 auto; background-color:#E5E5E5; border: 1px solid black; } #div1{ background-color:#E9967A; } </style>
<div id="div1">
<table> <tr> <td> 让我水平居中吧! </td> </tr> </table>
</div>
结合<ul>、<li>可以让多行居中。
2、改变块级元素的 display 为 inline 类型(设置为行内元素显示),然后使用 text-align:center
(文本居中)来实现居中效果,例如:
<style type="text/css"> #div1{ display: innline; text-align: center; background-color: pink; } </style> <div id="div1"> 让我水平居中吧! </div>
3、通过给父元素设置 float:left;, position:relative 和 left:50%,子元素设置 position:relative 和 left: -50% 来实现水平居中。例如:
<style type="text/css"> #div1{ position: relative; float: left; left: 50%; border:2px solid blue; } #div2{ position: relative; left: -50%; border: 2px solid black; } </style> <div id="div1"> <div id="div2"> 让我水平居中吧! </div> </div>
这个方法可能不理解什么意思,父元素div通过left:50%让父元素的盒子左边与浏览器窗口中线对其,然后子元素再通过left:-50%让其中线与浏览器中线对其以此完成水平居中,还是不理解的话可以自行操作试试,设置了边界线应该可以很容易的理解原理
其实我有一点不明白,就是为什么父元素一定要设置 float:left; 少了这个设置父元素的宽度变成了不是自适应宽度的div,希望知道的客友告知,谢谢啦!