Html/Css動態對中

Question

我想要實現的是以下內容， 我有6個divs在水平對齊的屏幕大小的剩餘部分，左邊和右邊有相等的邊距。

現在，當屏幕的寬度很小以將它們顯示在一行中時，我想將它們顯示在兩行中（每個都有3個div）。所有這些現在都在工作，但是當它變成兩排佈局時，左右相等的邊距就消失了，它們會在屏幕左側剪切。

我錯過了什麼嗎？

.container{ 
 
    z-index: 3; 
 
    bottom: 20px; 
 
    width: 100%; 
 
    position: absolute; 
 
} 
 

 
.center-container{ 
 
    display: table; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
} 
 

 
.inner-container{ 
 
    display: inline-block; 
 
} 
 

 
.group-container{ 
 
    display: inline-block; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
} 
 

 
.element{ 
 
    display: inline-block; 
 
    width: 150px; 
 
    height: 150px; 
 
    background-color: #000000 
 
}

<div class="container"> 
 
    <div class="center-container"> 
 
     <div class="inner-container"> 
 
      <div class="group-container"> 
 
       <div class="element"></div> 
 
       <div class="element"></div> 
 
       <div class="element"></div> 
 
      </div> 
 
      <div class="group-container"> 
 
       <div class="element"></div> 
 
       <div class="element"></div> 
 
       <div class="element"></div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

工作一行佈局

的jsfiddle例如：https://jsfiddle.net/9oc19oky/

預先感謝您:)

Answer 1

：非工作兩排佈局https://jsfiddle.net/7ef7xLhu/

的jsfiddle例子您可以通過設置text-align: center; t來對齊它們父母，因爲它們默認爲inline-block元素，它們對齊到左側。

.inner-container { 
    display: inline-block; 
    text-align: center; 
} 

.container { 
 
    z-index: 3; 
 
    bottom: 20px; 
 
    width: 100%; 
 
    position: absolute; 
 
} 
 

 
.center-container { 
 
    display: table; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
} 
 

 
.inner-container { 
 
    display: inline-block; 
 
    text-align: center; 
 
} 
 

 
.group-container { 
 
    display: inline-block; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
} 
 

 
.element { 
 
    display: inline-block; 
 
    width: 150px; 
 
    height: 150px; 
 
    background-color: #000000 
 
}

<div class="container"> 
 
    <div class="center-container"> 
 
    <div class="inner-container"> 
 
     <div class="group-container"> 
 
     <div class="element"></div> 
 
     <div class="element"></div> 
 
     <div class="element"></div> 
 
     </div> 
 
     <div class="group-container"> 
 
     <div class="element"></div> 
 
     <div class="element"></div> 
 
     <div class="element"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

新增text-align: center;到.inner-container

.container { 
 
    z-index: 3; 
 
    bottom: 20px; 
 
    width: 100%; 
 
    position: absolute; 
 
} 
 

 
.center-container { 
 
    display: table; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
} 
 

 
.inner-container { 
 
    display: inline-block; 
 
    text-align: center; 
 
} 
 

 
.group-container { 
 
    display: inline-block; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
} 
 

 
.element { 
 
    display: inline-block; 
 
    width: 150px; 
 
    height: 150px; 
 
    background-color: #000000 
 
}

<div class="container"> 
 
    <div class="center-container"> 
 
    <div class="inner-container"> 
 
     <div class="group-container"> 
 
     <div class="element"></div> 
 
     <div class="element"></div> 
 
     <div class="element"></div> 
 
     </div> 
 
     <div class="group-container"> 
 
     <div class="element"></div> 
 
     <div class="element"></div> 
 
     <div class="element"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

添加的text-align：C輸入至父級（內部容器）。你應該排序。

Answer 4

只需加入這在你的CSS，你就完成了。 :)

.inner-container { 
    text-align: center; 
} 

你可以參考我的鏈接，以及如果你需要的。

https://jsfiddle.net/Dhruvil21_04/hadu5my3/