水平居中总结

时间：2016-09-29 17:27:15 阅读：107 评论：0 收藏：0 [点我收藏+]

标签：

1.行内元素

如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。

2.块级元素

块级元素分为定宽不定宽两种

定宽块级元素用text-align就不起作用了，此时可以设置margin：0 auto；也就是说要想用margin达到水平居中，必须满足两个条件：定宽+块状，缺一不可。

不定宽块状有三种方法：

第一种：加入table标签，设置margin（之所以可以这样是table长度自适应，即table的长度根据他文本的长度决定，并且它是块级元素，所以满足那两个条件）

<table>

<tbody>

<ul>

<li>我是第一行文本</li>

<li>我是第二行文本</li>

<li>我是第三行文本</li>

</ul>

</td></tr>

</tbody>

</table>

第二种：display：inline;将块状改成行内，用text-align;

第三种：定位，position：relative;left:50%;达到居中目的;通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

标签：

原文地址：http://www.cnblogs.com/5811yc/p/5920395.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

周排行