使用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