如何用填充来集中溢出的容器？

我需要集中溢出的容器（div或节），它具有填充并且它位于body内部。容器的宽度是固定的（例如500像素），水平填充100像素。我怎么能够集中这个容器？如何用填充来集中溢出的容器？

我尝试以下操作：

#wrapper { 
    text-align: center; 

    margin: 0px auto; 
    padding: 0px 100px; 
    width: 500px; 
}

http://jsfiddle.net/Volter9/tu6yg5ch/

如果你会改变结果选项卡小于700个像素的宽度，你会看到该容器未正确centerized。

感谢您的关注！

来源

2014-10-06 volter9

这可能是一种做法。您需要使用position: relative或position: absolute的定位。

该类型的定位以使用将取决于布局的其他方面，例如，如果有这样在包装之后的其它元件，用于包装任何固定的高度和的。

body { 
 
    overflow-x: hidden; 
 
} 
 

 
#wrapper { 
 
    text-align: center; 
 
    border: 1px dotted black; 
 
    margin: 0px auto; 
 
    padding: 0px 100px; 
 
    width: 700px; 
 
    position: relative; 
 
    left: 50%; 
 
    margin-left: -350px; 
 
    box-sizing: border-box; 
 
}

<div id="wrapper"> 
 
    content 
 
</div>

注：边框，框属性不是绝对必要的。 margin-left的值需要是包装元素总宽度的一半，因此您需要对包装块的计算的宽度进行计算。

来源

2014-10-07 00:06:04

假设在#wrapper，footer下面有另一个块。 http://jsfiddle.net/Volter9/tu6yg5ch/5/这似乎并不成功，如果这个块有固定的高度，那么我可以使用身体上的填充顶部来移动块。感谢您的努力，但这种解决方案并不是我需要的。你能想到别的吗？ – volter9 2014-10-07 00:11:36

这是正确的，绝对定位将'＃wrapper'带出常规内容流。您需要做出一些设计决定，例如在包装器上指定高度，否则您需要一些JavaScript或jQuery来为您计算高度或宽度。 – 2014-10-07 00:15:22

我把'position：absolute'改成''position：relative''，它解决了问题！ http://jsfiddle.net/Volter9/tu6yg5ch/6/ – volter9 2014-10-07 00:18:48

如何用填充来集中溢出的容器？

回答

相关问题