文本對齊中心受浮動元素影響

Question

我有兩個浮動元素，左右。

它們的父元素都是text-align：center，margin：auto。

請看這裏：

http://jsfiddle.net/KRWNs/

如果您看到1.文字，還有的中心。 2.您可以看到，文本正在移動（受到浮動元素的影響）並且不在中心位置。

我怎樣才能使這種對齊作爲正常的上面（作爲1.文本），而不會受到右側和左側的浮動元素的影響？

感謝在前進

Answer 1

你需要使用其他的東西比浮動堅持要素向兩側。事實上，他們表現得和他們應有的一樣。這裏有一個updated example使用絕對定位來堅持雙方。但是，很長的內容不會兌現這些元素。

或者，如this test所示，您需要確保兩個浮動塊的寬度相同。

事實上，外部元素是「邊際自動」是無關緊要的。

Answer 2

如果你不能玩絕對位置，就像我的情況一樣，因爲我正在打印一個頁面，並且絕對會將所有內容帶出頁面，所以可以使用邊距進行遊戲。 只需在不同的行中寫下你想要的內容，然後在左右對齊的內容中添加一個負的頂部邊距（或者如果您在頂部寫入了底部的底部）。

使用Phrogz的例子：

<div class="test"> 
     <div id="s0"> 
     1. text<br /> 
     2. text 
    </div> 
    <div id='s1'>999</div> 
    <div id='s2'>Follow me</div> 
</div 

與CSS：

.test{ 
    width: 500px; 
    text-align: center; 
    background: yellow; 
    line-height: 18px; 
} 

#s1 { text-align: right; margin-top: -18px; } 
#s2 { text-align: left; margin-top: -18px; } 

你可以看到一個工作示例here