css浮動元素的水平置中

標籤：style   io   ar   color   os   sp   on   div   問題   

對於定寬的非浮動元素我們可以用 margin:0 auto; 進行水平置中，對於不定寬的浮動元素我們也有一個常用的技巧解決它的水平置中問題。分解如下：

1、HTML 部分：

<div class="box">
    <p>我是浮動的</p>
    <p>我也是置中的</p>
</div>

2、CSS 部分：

.box{
    float:left;
    position:relative;
    left:50%;
}
p{
    float:left;
    position:relative;
    right:50%;
}

這樣看來就很簡單了吧，父元素和子項目同時左浮動，然後父元素相對左移動50%，再然後子項目相對右移動50%，或者子項目相對左移動-50%也就可以了。如此簡單如此神奇。

css浮動元素的水平置中