垂直中心标题元素和一组使用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