0

给定以下 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，展示了我到目前为止所做的事情。

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

4

2 回答 2

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>
于 2013-05-27T23:52:49.963 回答
1

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

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

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

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

脚注

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

于 2013-05-28T11:37:12.970 回答