Question

我需要在网页中水平放置一些内容。内容可能有也可能没有明确的宽度。

我使用堆栈溢出问题 centering a div block without the width 作为模型，当内容没有明确的宽度，或显式宽度小于包含区域。

但是，如果内容的宽度大于包含区域，则内容仍然居中，但无法滚动到隐藏内容。

CSS：

.letterbox-outer-wrap {
    padding-top: 20px;
    position:relative;
    background: aqua;
    overflow:hidden;
}

.letterbox-outer-center {
    float:left;
    position:relative;
    left: 50%;
    background: yellow;   
}

.letterbox-inner-center {
    float: left;
    position:relative;
    left:-50%;
    background: red;
}

.letterbox-clear {
    clear: both;
}

.large-explicit-width {
    width: 3000px;
    background:purple;
}

HTML：

<div class="letterbox-outer-wrap">
    <div class="letterbox-outer-center">
        <div class="letterbox-inner-center">
            <p class="large-explicit-width">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
    </div>
</div>

如何将div水平居中，可能有也可能没有明确的宽度？如果宽度大于可查看容器，我想左对齐内容并让浏览器在屏幕底部放置一个滚动条（就像普通网页一样）。

以下是jsfiddle示例。

如果需要，我绝对可以使用javascript和jQuery。

Answer 1

当您使用left属性来居中内容时，您无法访问具有溢出的内容，因为您希望在width小于浏览器大小并且使用实际标记时居中你可以这样做：

.letterbox-outer-wrap {
   text-align:center;
}
.letterbox-outer-center {
  display:inline-block;
}

删除此http://jsfiddle.net/s5TLz/1/

的float和left属性

使用大的显式宽度内容水平居中div被剪裁

1 个答案: