當另一個元素在它旁邊浮動時，如何水平居中（居中）未知寬度的元素？

考慮下面的HTML：當另一個元素在它旁邊浮動時，如何水平居中（居中）未知寬度的元素？

<div id="container"> 
    <div id="left">Left</div> 
    <div id="centre">Centred</div> 
</div>

和CSS：

#left { 
    float: left; 
    text-align: left; 
} 

#centre { 
    text-align: center; 
}

我怎麼能水平居中centre元素沒有給它一個固定的寬度？下圖顯示了理想的結果：

The "left" element is on the left side. The "centred" element is centred horizontally relative to the container. Both elements are vertically aligned.

這裏是我能得到它看起來像至今：

The "left" element is on the left side. The "centred" element is centred horizontally relative to the space between the right side of the "left" element and the right side of the container. Both elements are vertically aligned.

Here's a jsFiddle demonstrating what I have done so far.

我喜歡一個通用的解決方案不需要指定寬度的任何東西。

來源

2013-05-27 Sam

它看起來像你希望'＃centre'元素具有縮小到適合的寬度。如果不是一個詞，你有一個短語或一個圖像會發生什麼？任何其他限制？ –

http：// jsfiddle。net/V9bNZ/2/ – DiederikEEn

@MarcAudet，我不是專門尋找縮小到適合的;我不介意重疊，但我認爲如果中心元素移動而不是重疊會更好。關於短語或圖片，我更喜歡通用解決方案，但我仍然對特定於內容類型的解決方案感興趣。 – Sam

如果你知道左div的寬度，你可以做這樣的：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 

<style media="all"> 

#left { 
    float: left; 
    width: 30px; 
} 

#centre { 
    margin: 0 40px; 
    text-align: center; 
} 

#left, #centre, #container { 
    border: 1px solid #000; 
} 

#container { 
    width: 175px; 
    padding: 5px; 
} 

</style> 

</head> 
<body> 

<div id="container"> 
    <div id="left">Left</div> 
    <div id="centre">Centred</div> 
</div> 

</body> 
</html>

來源

2013-05-27 23:52:49

如果你想與收縮到適合寬度爲內容#centre元素，你可以使用以下：

<div id="container"> 
    <div id="left">Left</div> 
    <div id="centre">Centred</div> 
</div>

和下面的CSS：

#container { 
    width: 175px; 
    text-align: center; 
    position: relative; 
    border: 1px solid black; 
    padding: 5px; 
    margin: 5px; 
} 
#left { 
    position: absolute; 
    border: 1px solid black; 
    padding: 5px; 
    margin: 5px; 
} 

#centre { 
    display: inline-block; 
    border: 1px solid black; 
    padding: 5px; 
    margin: 5px; 
}

如果你想要得到的冷縮爲了適應寬度爲#centre，您需要浮動元素，使用絕對定位或聲明嵌入塊顯示類型。由於您不想爲#centre指定寬度，因此使用浮點或絕對定位不允許您將內容居中。但是，如果您在父項#container上指定display: inline-block並使用text-align: center，則您將獲得元素的中心位置，併爲邊框，填充等設置樣式控制。

但是，爲此，您必須對#left元素使用絕對定位。如果使用浮點數，則#centre的內容將環繞左側元素並更改居中。

在#container上設置position: relative，否則#element將相對於頁面的根（或一些其他非靜態定位）元素進行定位。

小提琴：http://jsfiddle.net/audetwebdesign/hTFBa/

腳註

在你演示的例子，你有一個內容一個字的文本標籤。如果您有多詞短語，則需要約束左元素的寬度或在中心元素上指定一些邊距以防止文本重疊。

來源

2013-05-28 11:37:12

當另一個元素在它旁邊浮動時，如何水平居中（居中）未知寬度的元素？

回答

相關問題