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元素水平居中，不用赋予其固定宽度？下图显示了所需的结果：

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.

我更喜欢通用的解决方案，不需要指定任何宽度。

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指定宽度，因此使用float或absolute positioning将不允许您将内容居中。但是，如果您指定display: inline-block并在父text-align: center上使用#container，您将获得元素的中心，并对边框，填充等进行一些样式控制。

但是，要使其正常工作，必须对#left元素使用绝对定位。如果使用float，#centre的内容将环绕左侧元素并更改居中。

在position: relative上设置#container，否则#element将相对于页面的根（或其他一些非静态定位）元素定位。

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

<强>脚注

在演示示例中，您可以为内容添加单个文字标签。如果您有多个单词短语，则需要约束左侧元素的宽度或在中心元素上指定一些边距以防止文本重叠。

当另一个元素在其旁边浮动时，如何将未知宽度的元素水平居中（居中）？

2 个答案: