3

我需要有一个 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（我使用浮点数放在那里），这使它们向右移动。

显然，在我的尝试中（参见示例），div 不会以屏幕为中心，而是以它们的 div 宽度为中心，这是预期的，但不是我需要的。

无论它们是否在同一行中有其他 div，我都需要将 div 居中到屏幕上吗？

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

谢谢

4

3 回答 3

1

如果你让你的.left类绝对定位，这些 div 不会偏移居中的文本。

.left{
    float:left;
    position:absolute;
}
于 2013-06-10T19:02:23.167 回答
0

我要做的是将.leftdiv放在中心 div 内。然后我会摆脱，float:left只是做一个绝对的位置。您可以在不移动.leftdiv 的情况下仅进行绝对定位，但是您会遇到不同浏览器以不同方式呈现页面的问题，因为您没有在 CSS 中定义topand 。left通过将.leftdiv 放在中心 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>
于 2013-06-10T19:16:52.997 回答
0

假设您有一个宽度为 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

于 2013-06-10T19:30:44.993 回答