0

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

试图在 '.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 使绿色框（见链接）居中，但是底部的孤立框然后居中，这不是预期的效果。

非常感谢您的帮助！

4

5 回答 5

0

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

于 2013-02-15T16:01:39.223 回答
0

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

于 2013-02-15T15:22:22.460 回答
0

.你可以做两件事之一：

为内部包装添加宽度

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

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

于 2013-02-15T15:13:25.923 回答
0

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

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

或者，如果您不想设置宽度，则需要设置一个左右相同的实际边距，例如 change margin:0 auto; 在 .grid-wrapper-inner 到 margin: 5% 或 margin: 50px。

于 2013-02-15T15:14:04.557 回答
0

您必须设置width为.grid-wrapper-inner. 您可以尝试设置 90%，您会注意到差异。

于 2013-02-15T15:07:24.577 回答