水平居中動態寬度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內

回答

相關問題