左側/右側/中間divs在頁面中心位於* body中間*

我正在嘗試在頁面的左側，右側和中心上創建頁面頁腳。我一直在舉例such as this，我遇到了同樣的問題：中心div的內容居中左右divs的邊界，而不是居中於身體。也就是說，如果左/右寬度不同，則中心偏離中心。左側/右側/中間divs在頁面中心位於* body中間*

我不能使用固定寬度，因爲我不知道內容和字體大小。我知道每個內容只有幾個字。

由於類似的原因，我無法使用顯式比例寬度;我不知道內容的比例，例如中心可能較短，左側或右側大於頁面寬度的1/3。

我實際上並沒有有使用div，我只是因爲這似乎是這樣做的方式......但任何事情都會讓我左+身體居中+右對齊頁腳樣式佈局將工作（只要它適用於所有常見的瀏覽器）。

我不在乎內容重疊時會發生什麼;他們可以重疊或者自動換行，或者做一些其他的事情。

目前我已經得到最接近的是這樣的CSS：

#left { float:left; } #right { float:right; } #center { float:none; text-align:center; }

而這個HTML：

<div id="container"> <div id="left">...</div> <div id="right">...</div> <div id="center">...</div> </div>

但是我看到這（個極端的例子）：

這裏是一個小提琴：http://jsfiddle.net/HCduT/

我試過float,display,overflow和margin的各種組合，但我似乎無法得到正確的結果。

編輯：我也試過http://jsfiddle.net/nshMj/，由其他人推薦，但它有同樣的問題（缺點是我不明白它是什麼）。

如何讓中心div中的內容與頁面對齊，而不是居中在左右div（大小不同）之間？

來源

2014-07-05 Jason C

你的意思是這樣的http://jsfiddle.net/HCduT/3/？ –

@Alek謝謝。這種作品，但是如果它大於頁面寬度的1/3（對於短中心內容可以是這樣），則將右側的內容換行。當我從右側刪除單詞中斷時，它回到了原來的問題。 –

我不是100％肯定你之後。這是我沒有得到：

你想在左邊的div左邊
你想在右邊
你想不想限制那些33％的寬度，右邊的div;
你想要中心永遠是死的中心。
你不關心重疊內容

如果我說對了，那麼試試這個：DEMO

CSS：（顏色爲，所以您可以區分內容，因爲它重疊）

#content { 
    text-align:center; 
} 
#container { 
    position: relative; 
} 
#left { 
    float:left; 
} 
#right { 
    float:right; 
    color: #ccc; 
} 
#center { 
    text-align:center; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    color: red; 
}

來源

2014-07-06 00:00:42 jme11

哇，我很抱歉，我把這個項目擱置了一段時間，直到現在才注意到這個答案。這正是我所尋找的，並且很有意義。再次感謝！ –

經過一番研究，我這個結束：

HTML

<body> 
    <div id="content">center point V center point</div> 
    <div id="container"> 
     <div id="left">L</div> 
     <div id="center">C</div> 
     <div id="right">RRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR</div>  
     <br style="clear: left;" /> 
    </div> 
</body>

CSS

#content { 
    text-align:center; 
} 
#left { 
    width:33%; 
    float:left; 
} 
#right { 
    width:33%; 
    float:left; 
    overflow:hidden !important; 
} 
#center { 
    float:left; 
    width:33%; 
    text-align:center; 
} 

#container{ 
    width:100%; 
}

fiddle

來源

2014-07-05 20:18:36

謝謝。這也幾乎可以工作，除非它在剪輯div中的文本，如果它大於身體寬度的1/3。我可以在左邊和中間設置「overflow：visible」來使它們工作，但它不能在右邊工作，因爲文本保持與右邊div的左邊緣對齊（即使我也添加了「text-align ：right'），然後跑出屏幕。我不明白的是，爲什麼即使當中心div是全寬時，左右影響中心的文本位置（通過添加「border」來證明）;如果我能阻止左/右影響可行的中心佈局。 –

如果您將'overflow：scroll;'設置爲'＃right'元素？ –

[然後當內容大於1/3時它添加一個滾動條。]（http://jsfiddle.net/K4DRk/） –

左側/右側/中間divs在頁面中心位於* body中間*

回答

相關問題