只使用CSS的容器中的包裝元素

Question

我有一個.container和3個元素。容器是全寬的，它的孩子對齊到左邊。我想集中一切。

這是一個佈局

.container 
    .element1 
    .element2 
    .element3 

這就是我想要

.container { 
    .invisible-wrapper-with-css { 
    .element[1-3] { 
    } 
    } 
} 

我不想添加任何HTML。

有沒有辦法將.element[1-3]作爲一個項目處理，或者是否有辦法 - 僅使用CSS - 繞過它們以便我可以給.element[1-3]兒童的包裝？

預先感謝您。

Answer 1

如果要選擇所有元素，只需在容器中選擇div子項的每個實例。

.container { 
    div { 
    } 
} 

我建議只使用一個Flexbox的顯示器，雖然：

.container { 
    display: flex; 
    justify-content: space-around; 
} 

會給你間距類似於表格單元格

.container { 
     display: flex; 
     justify-content: center; 
    } 

將從根本上漂浮的所有元素到中心

Answer 2

您可以使用display:inline-block上的子元素和text-align:center在容器上。

.container { 
 
    text-align: center; 
 
    background: pink; 
 
} 
 
.container div { 
 
    display: inline-block; 
 
    width: 100px; 
 
    height: 50px; 
 
    border: 1px solid grey; 
 
    background: green; 
 
}

<div class="container"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</div>

總體上，雖然，我更喜歡Flexbox的。