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

Question

給出以下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元素？ 下圖顯示了所需的結果：

“左”元素位於左側。 “居中”元素相對於容器水平居中。兩個元素都垂直對齊。

這是我到目前為止看起來的樣子：

“左”元素位於左側。 “居中”元素相對於“左”元素右側和容器右側之間的空間水平居中。兩個元素都垂直對齊。

這是一個jsFiddle，展示了到目前為止我所做的一切。

我更喜歡通用解決方案，它不需要指定任何寬度。

Answer 1

如果你知道左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>

Answer 2

如果您希望#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需要浮動元素，使用絕對定位或聲明內聯塊顯示類型。 由於您不想為#centre指定寬度， #centre使用float或absolute positioning將不允許您將內容居中。 但是，如果在父#container上指定display: inline-block並使用text-align: center ，您將獲得元素的中心，並對邊框，填充等進行一些樣式控制。

但是，要使其正常工作，必須對#left元素使用絕對定位。 如果使用float，則#centre的內容將環繞左側元素並更改居中。

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

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

腳注

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

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

問題描述

2 個解決方案

解決方案1
1 2013-05-27 23:52:49

解決方案2
1 2013-05-28 11:37:12

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

問題描述

2 個解決方案

解決方案1 1 2013-05-27 23:52:49

解決方案2 1 2013-05-28 11:37:12

解決方案1
1 2013-05-27 23:52:49

解決方案2
1 2013-05-28 11:37:12