水平居中总结
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了水平居中总结相关的知识,希望对你有一定的参考价值。
1.行内元素
如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的。
2.块级元素
块级元素分为定宽不定宽两种
定宽块级元素用text-align就不起作用了,此时可以设置margin:0 auto;也就是说要想用margin达到水平居中,必须满足两个条件:定宽+块状,缺一不可。
不定宽块状有三种方法:
第一种:加入table标签,设置margin(之所以可以这样是table长度自适应,即table的长度根据他文本的长度决定,并且它是块级元素,所以满足那两个条件)
<table>
<tbody>
<tr><td>
<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% 来实现水平居中。
以上是关于水平居中总结的主要内容,如果未能解决你的问题,请参考以下文章