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

一个看似简单的问题，但我发现的其他解决方案在这里并不完美。水平居中动态宽度div，在另一个动态div内

试图中心 '.grid-包装-内' '.grid-包装'

.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; 
    }

内我想 '显示：内联块'（与 '文本对齐：中心' 上的父）将实现这一目标，但撞了南墙

最好的解释在这里：

http://jsfiddle.net/YrF9C/1

本质上需要的，以防止ü网包装，内它的父母div的100％，所以它可以居中。

我确实通过使用内嵌块对这些绿色框（请参见链接）进行居中，但是底部的孤立框随后居中，这不是所需的效果。

非常感谢您的帮助！

来源

2013-02-15 traummaschine

您必须将width设置为.grid-wrapper-inner。你可以尝试设置90％，你会注意到不同之处。

来源

2013-02-15 15:07:24

我需要'.grid-wrapper-inner'有一个动态宽度（由集合浮动div的总宽度设置） – traummaschine 2013-02-15 15:10:24

如果你把'max-width：90％ ''''.grid-wrapper-inner'。它将是动态的，但如果内容太宽，最大宽度将是'grid-wrapper'的90％ – 2013-02-15 17:22:43

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

的宽度增加了内包装材料

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

，或者你可以添加填充到.grid，包装

来源

2013-02-15 15:13:25 cfg

您可以使用保证金：自动水平居中，但为了工作你想要居中的内部div需要指定某种宽度。否则，它只是延伸和自动边距为0.从技术上讲，这也是居中，但不是你想要的。

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

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

来源

2013-02-15 15:14:04 IvanJoukov

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

来源

2013-02-15 15:22:22 jonasnas

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

来源

2013-02-15 16:01:39

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

回答

相关问题