與Flexbox的

Question

在同一容器中應用不同的流動我想的h1元件具有在容器的頂端，在中央，用column方向。我如何對齊它？

CodePen

HTML：

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

<figure class="gallery-item"> 
    <span class="helper"></span><img src="http://placehold.it/300x300"> 
    <figcaption class="img-title"> 
    <h5>Image Title</h5> 
    </figcaption> 
</figure> 

<figure class="gallery-item"> 
    <span class="helper"></span><img src="http://placehold.it/300x300"> 
    <figcaption class="img-title"> 
    <h5>Image Title</h5> 
    </figcaption> 
</figure> 

<figure class="gallery-item"> 
    <span class="helper"></span><img src="http://placehold.it/300x300"> 
    <figcaption class="img-title"> 
    <h5>Image Title</h5> 
    </figcaption> 
</figure> 
</div> 

CSS：

.container { 
    display: flex;  
    flex-direction: row; 
    align-items: center; 
    height: 75vh; 
    background: grey; 
    justify-content: space-around; 
} 

謝謝！

Answer 1

您已使用display：flex來對齊您的項目，並且h1位於flex下。這就是爲什麼它與項目一致。

.container { 
    display: flex;  
    flex-direction: row; 
    align-items: center; 
    height: 75vh; 
    justify-content: space-around; 
} 
.wrapper { 
background:grey; 
} 
h1 { 
    display:block; 
    clear:both; 
    text-align:center; 
} 

check solution here