首页 > 代码库 > css之水平居中设置

css之水平居中设置

  • 行内元素:     div,p{text-align:center;}

  • 定宽块状元素:  第一宽度固定,第二margin-left和margin-right均是auto。div{border:1px solid red;width:200px;margin:20px auto;}

  • 不定宽块状元素方法

  1. 加入 table 标签( 包括 <tbody>、<tr>、<td> )。

  2. 设置 display: inline 方法:与第一种类似,显示类型设为 行内元素,进行不定宽元素的属性设置,设置 position:relative 和 left:50%:利用 相对定位 的方式,将元素向左偏移 50% ,即达到居中的目的。{display:inline; position:relative; left:50%;}

  3. {display:table; margin:0 auto;}也可以是实现

 

 

  1. 设置 display: inline 方法:先设置为行内元素,再设置center,这种一般针对ul和ol。如如所示:技术分享技术分享

  2. 通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left: -50% 来实现水平居中技术分享技术分享

 

css之水平居中设置