在另一个动态 div 中水平居中动态宽度 div答案

【问题标题】：Center dynamic width div horizontally, within another dynamic div在另一个动态 div 中水平居中动态宽度 div
【发布时间】：2013-01-31 14:10:33
【问题描述】：

一个看似简单的问题，但我发现的其他解决方案在这里并不完全奏效。

试图在 '.grid-wrapper' 中居中 '.grid-wrapper-inner'

.grid-wrapper {
    background:grey;
    display:block;
    margin:0 auto;
    width:90%;
    padding:80px 0;
    text-align:center;
    }

.grid-wrapper-inner {
    background:yellow;
    display:inline-block;
    margin:0 auto;
    text-align:left;
    }

我认为 'display:inline-block'（在父级上使用 'text-align:center'）可以实现这一点，但遇到了障碍

最好在这里解释：

http://jsfiddle.net/YrF9C/1

本质上需要防止 grid-wrapper-inner 占用其父 div 的 100% 以便它可以居中。

我确实通过使用 inline-block 使绿色框（见链接）居中，但底部的孤立框随后居中，这不是预期的效果。

非常感谢您的帮助！

【问题讨论】：

标签： html css

【解决方案1】：

您必须将width 设置为.grid-wrapper-inner。您可以尝试设置 90%，您会发现差异。

【讨论】：

我需要 .grid-wrapper-inner 有一个动态宽度（由其中的集体浮动 div 的总宽度设置）
如果您将max-width: 90% 放在.grid-wrapper-inner 上，您可以获得类似的行为。它将是动态的，但如果内容太宽，最大宽度将为grid-wrapper的90%

【解决方案2】：

。你可以做以下两件事之一：

为内部包装添加宽度

.grid-wrapper-inner {
background:yellow;
display:inline-block;
margin:0 auto;
width:80%;
text-align:left;
}

或者你可以在 .grid-wrapper 中添加填充

【讨论】：

【解决方案3】：

您可以使用 margin:auto 水平居中，但要使您尝试居中的内部 div 工作，需要指定某种宽度。否则它只会拉伸并且自动边距为 0。从技术上讲，这也是居中的，但不是您想要的。

例如尝试将 width: 86% 添加到 .grid-wrapper-inner。

或者，如果您不想设置宽度，则需要设置一个左右相同的实际边距，例如更改边距：0 自动；在 .grid-wrapper-inner 到边距：5% 或边距：50px。

【讨论】：

【解决方案4】：

将 padding:80px 0; 改为 padding:80px;，而不是 padding:80px;。您仅为顶部和底部设置填充，但左右为 0，因此内部 div 向上扩展直到包装器 div 的左右边框。它仍然垂直和水平居中，只是左边和右边的填充为 0。

【讨论】：

【解决方案5】：

将宽度设置为.grid-wrapper-inner，可以解决您的问题，但显然您不能或不想这样做。那么，如果你仍然想让布局适应屏幕大小，也许你可以考虑使用CSS media queries？

【讨论】：