上一节介绍了不定宽块级元素居中的第二种方法,设置display:inline;这一种方法的缺点就是使得元素丧失了一些特性,例如不能设置高度,宽度等。
那这一节就介绍不定宽块级元素居中的第三种方法.
第一步:父元素设置float:left;position:relative;left:50%;
第二步:元素设置position:relative;left:-50%;
html关键代码
<div>
<p>不定宽块级元素居中第三种方法</p>
</div>
css关键代码
<style>
div{
float:left;
position:relative;
left:50%
}
p{
position:ralative;
left:-50%;
}
</style>
相比前两种方法,这一种方法不会产生多余的标签,也不会使元素inline化,但是它使元素变成了相对定位,在网页布局中会产生其它副作用,例如元素错位。
css中元素的横向居中就总结到这里,纵向居中将在下一节介绍。
欢迎转载,请注明出处!