Question

我需要一个div，内容总是相对于屏幕居中，但我还想在中心的左边有其他div。如果我只是居中“中心”div的内容，它将相对于其div宽度居中，而不是屏幕。

和我想要的东西是这样的......

|                              true  center                              |
|left div|                      centered D                               |
|longer left div|               centered D                               |
|another even longer left div|  centered D                               |

假设“真正的中心”是屏幕的中心，那个很容易。

但是我希望所有“居中的D”div都以屏幕为中心，但是他们的左边有div（我用漂浮物放在那里），这使得它们向右移动。

显然，在我的尝试中（see example），div不会以屏幕为中心，而是以divs宽度为中心，这是预期的，但不是我需要的。

我需要将div放在屏幕中，无论他们是否在同一行中有其他div？

我怀疑我做错了，这可能是微不足道的，但我对css布局有点新意。

由于

Answer 1

如果您使.left类绝对定位，则这些div不会偏移居中文本。

.left{
    float:left;
    position:absolute;
}

Answer 2

我要做的是将.left divs 放在中心div中。然后我会摆脱float:left而只是做一个绝对的位置。您可以在不移动.left div的情况下进行绝对定位，但是您会遇到不同浏览器的问题，因为您没有定义top和left CSS。通过将.left div放在中心div中，您可以添加顶部和左侧CSS并防止浏览器呈现不同的内容：

.center {
    //You need to add relative position for the absolute to align properly
    position:relative;
}
.left {
    position:absolute;
    top:0;
    left:0;
}

...您的HTML将如下所示：

<div class="center">
    <div class="left">left-aligned content</div>
    centered content
</div>

Answer 3

假设你有一个200px宽度的div，你希望它居中。试试这段代码：

HTML：

<div id="centered">
    Content
</div>

CSS：

#centered{
    position:absolute;
    width:200px;
    left:50%;
    margin-left:-100px;
}

margin-left是-100px，因为以div为中心，计算是-width / 2

中心div到屏幕但在同一行中有另一个div

3 个答案: