与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