一般情况下,如果想对内容子元素进行水平居中的话,那只要将父级元素设置为:text-align:center;就可以了。如果子元素也是block可以display:inline-block;
但是如果在宽度不定的情况下如何水平居中?可以用wrapper加float办法。
<style>
.wrapper{
width:200px;
border:1px solid blue;
float:left;
position:relative;
left:50%;
}
.child{
border:1px solid green;
position:relative;
left:-50%;
text-align:center;
}
效果如下:
注意观察定位点的移动规律,其中的百分比均是相对于父级元素。父级div相对定位右移50%;子级div相对于父级再左移50%;浮动似乎可要可不要。
就行了。