垂直中心標題元素和一組使用flexbox的內聯div使用flexbox

Question

我有一個<h1>元素和三個寬度爲33％的div。所有這4個元素都在高度設置爲100vh的容器中。

目前我可以水平對齊三個div，但是當我插入<h1>標記時，它將在它們旁邊對齊。

如何將頂部的<h1>與其下方的三個元素對齊？

.outside { 
 
    background-color: red; 
 
    height: 100vh; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
.inside { 
 
    background-color: yellow; 
 
    width: 30%; 
 
    margin-left: 1.5%; 
 
    margin-right: 1.5%; 
 
    float: left; 
 
}

<div class="outside"> 
 
    <div> 
 
    <h1> This is another</h1> 
 
    </div> 
 
    <div class="inside"> 
 
    <h1>This is h1 tag</h1> 
 
    <p>This is paragraph</p> 
 
    </div> 
 
    <div class="inside"> 
 
    <h1>This is h1 tag</h1> 
 
    <p>This is paragraph</p> 
 
    </div> 
 
    <div class="inside"> 
 
    <h1>This is h1 tag</h1> 
 
    <p>This is paragraph</p> 
 
    </div> 
 

 
</div>

My JSFiddle is here

Answer 1

它，因爲你的h1是 「外面」 的div內，以同樣的方式爲黃色箱子是。所以你需要添加另一個div，一個用於包含h1，另一個用於包含黃色框。

所以結構是這樣的：

<div class="container"> 
    <div class="h1"><h1>hello</h1></div> 
<div class="yellowcontainer"> 
    <div class="yellows"><h1>yellow</h1></div> 
</div> 
</div> 

，然後添加柔性只DIV類h1和yellowcontainer，因爲如果你把它添加到整個容器，你的H1和yellowcontainer會想彼此相鄰。

Answer 2

您可以設置不同的寬度或彈性值並重置頁邊距以允許容器居中。

https://jsfiddle.net/qdp1g7r0/6/

.outside { 
 
    background-color: red; 
 
    height: 100vh; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    flex-wrap: wrap; 
 
} 
 

 
.inside { 
 
    background-color: yellow; 
 
    flex:1 1 30%; 
 
    margin:0 1.5% auto; 
 

 
} 
 

 
.outside > div:first-of-type { 
 
flex:1 1 100%; 
 
margin:auto 0 0; 
 

 
}

<div class="outside"> 
 
    <div> 
 
    <h1> This is another</h1> 
 
    </div> 
 
    <div class="inside"> 
 
    <h1>This is h1 tag</h1> 
 
    <p>This is paragraph</p> 
 
    </div> 
 
    <div class="inside"> 
 
    <h1>This is h1 tag</h1> 
 
    <p>This is paragraph</p> 
 
    </div> 
 
    <div class="inside"> 
 
    <h1>This is h1 tag</h1> 
 
    <p>This is paragraph</p> 
 
    </div> 
 

 
</div>

Answer 3

• 鴻溝h1和.inside元件分成兩個不同的部分的.outside元件內。
• 設置.outside至flex-direction: column。
• 爲.inside到flex-direction: row（默認設置）
• 另外，設置容器避免在柔性容器（explanation）上邊距和填充使用百分比。

.outside { 
 
    display:flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    height: 100vh; 
 
    background-color: red; 
 
    flex-direction: column;  /* new; overrides default flex-direction: row */ 
 
} 
 

 
section { 
 
    display: flex;    
 
    flex-direction: row; 
 
} 
 

 
.inside { 
 
    width: 30%; 
 
    margin-left: 1.5%;   /* not recommended; don't use percentage margin ... */ 
 
    margin-right: 1.5%;   /* or padding on flex items... */ 
 
    background-color: yellow; /* https://stackoverflow.com/a/36783414/3597276 */ 
 
}

<div class="outside"> 
 
    <h1>This is another</h1> 
 
    <section> 
 
    <div class="inside"> 
 
     <h1>This is h1 tag</h1> 
 
     <p>This is paragraph</p> 
 
    </div> 
 
    <div class="inside"> 
 
     <h1>This is h1 tag</h1> 
 
     <p>This is paragraph</p> 
 
    </div> 
 
    <div class="inside"> 
 
     <h1>This is h1 tag</h1> 
 
     <p>This is paragraph</p> 
 
    </div> 
 
    </section> 
 
</div>

Revised Fiddle