中心對齊浮動div裏面的浮動容器

我有一個浮動容器與多個子浮動div。中心對齊浮動div裏面的浮動容器

我想中心對齊（不是文本對齊）所有這些漂浮的子div關於浮動容器。

我該怎麼做？

此時此刻，只有這些孩子的div 1是在瀏覽器上..User點擊上一頁/下一頁可見查看其他孩子的div（有點像旋轉木馬）

顯然，我現在面臨的問題定心如果我使用float：left作爲子div。

來源

2011-10-16 testndtv

您無法對齊相對於父元素的浮動元素。

float CSS屬性從文檔中的上下文中剝離元素（與position:absolute/fixed類似）。因此，元素不能被定位在「父母的中心」。

來源

2011-10-16 13:32:09

如果一次只顯示一個孩子div，可能他們不需要float。居中另一個塊內部的非浮動塊，最好的方法是指定以下樣式：

.child { 
    margin: 0 auto; 
}

這將居中div.child因爲左，右頁邊距將同樣跨越，以適應父容器。同樣，你可以對齊div s到左邊和右邊：

.left { 
    margin-right: auto; 
} 
.right { 
    margin-left: auto; 
}

來源

2011-10-16 13:32:26 Lapple

如果你有兩個容器和孩子一個固定的寬度，那麼你可以使用margin-left和margin-right設置爲（div容器寬度 - 包含寬度寬度）/ 2。當然，如果你有填充和邊框，你必須在公式中考慮它們。

來源

2011-10-16 15:19:06 nikan

我當時正在爲一個父容器中的三個div尋找一個解決方案，我遇到了這個舊帖子，似乎沒有提供好的解決方案。

我的情況：我有一個父容器寬度：100％，以便它適合屏幕。我還設置了最大寬度，以便父容器不會變得太大。在最大寬度，我希望三個子div顯示在一行中。因爲頁面被縮小並且父容器的寬度縮小，我希望三個子div重新排列，每個子div被推到前面的子div下面，直到它們全部垂直堆疊爲止。在發生這種情況時，我希望子div在父容器中保持中心對齊。

溶液是不使用浮動其中「撕開的元件從其上下文」爲羅布W¯¯真正狀態，而是使用直列塊：

.parentContainer{ 
    margin:0 auto; /*keep centered in page*/ 
    width:100%; /*stretch to page*/ 
    max-width:800px; /*expand up to 800px*/ 
    text-align:center; /*keep my children centered*/ 
} 
.childDiv{ 
    display:inline-block /*treat me as a block that flows like text*/ 
    width:230px; /*set my size*/ 
    vertical-align:top; /*keep me aligned at the top of my parent even if my siblings are taller than me*/ 
} 

<div class='parentContainer'> 
    <div class='childDiv'>Content 1</div> 
    <div class='childDiv'>Content 2</div> 
    <div class='childDiv'>Content 3</div> 
</div>

可以浮在父容器，給它絕對的定位，幾乎任何東西，並且孩子divs將保持他們的相同的行爲。

歡呼聲

來源

2014-04-28 15:01:15

中心對齊浮動div裏面的浮動容器

回答

相關問題