码迷,mamicode.com
首页 > Web开发 > 详细

css之水平居中设置

时间:2016-09-27 01:53:26      阅读:244      评论:0      收藏:0      [点我收藏+]

标签:

  • 行内元素:     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之水平居中设置

标签:

原文地址:http://www.cnblogs.com/qinbb/p/5911317.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!