Question

一个看似简单的问题，但我找到的其他解决方案在这里并没有起作用。

试图将'.grid-wrapper-inner'置于'.grid-wrapper'中心

.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％，以便它可以居中。

我确实得到了绿色框（参见链接），在这些框上使用了内联块，但是底部的孤立框然后居中，这不是理想的效果。

非常感谢您的任何帮助！

Answer 1

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

Answer 2

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

为内包装器添加宽度

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

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

Answer 3

你可以使用margin：auto来水平居中，但为了使你工作，内部div你需要设置某种宽度。否则它只会延伸并且自动边距为0.从技术上讲，这也是中心，但不是你想要的。

例如，尝试将宽度：86％添加到.grid-wrapper-inner。

或者，如果您不想设置宽度，则需要设置左右相同的实际边距，例如变动保证金：0自动;在.grid-wrapper-inner到margin：5％或margin：50px。

Answer 4

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

Answer 5

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

中心动态宽度div水平，在另一个动态div内

5 个答案: