Flex Box Align Top & Align Center

Question

I have a banner.

The banner has a paragraph that needs to be at the top of it.

It then has some heading text, That heading text needs to be aligned centrally.

I am having difficulty aligning everything to top and center.

.home-banner {
  padding-top: 0;
  padding-bottom: 0;
  text-align: center;
  background-image: url(../img/banners/banner-home.jpg);
  background-repeat: no-repeat;
  background-position: right;
  background-size: cover;
  margin-top: 2em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-area {}

.banner-item {
  flex: 1;
}

.banner-item--top {
  align-self: flex-start;
}

.banner-center {}

.banner-title {
  color: @white;
  background: @dark;
  display: inline-block;
  margin-bottom: 0.2em;
  padding: 1em;
}

.banner-title__text {
  font-family: @fatfrank;
  text-transform: uppercase;
  font-size: 60px;
  font-weight: 600;
}

<section class="home-banner">
  <div class="banner-area">
    <div class="container">
      <div class="banner-item banner-item--top">
        <p class="t-white coloured-underline">Experts in the permanent and contract placement of <br /> ex-Forces and technical candidates</p>
      </div>
      <div class="row">
        <div class="col-lg-12">
          <h1 class="banner-title"><span class="banner-title__text">Find Your</span></h1>
          <h1 class="banner-title"><span class="banner-title__text">Perfect Civilian Career</span></h1>
        </div>
        <!-- /.col-lg-12 -->
      </div>
      <!-- /.row -->
      <div class="row">
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
          <a class="button" href="#">I'm looking for a job</a>
        </div>
        <!-- /.col-lg-6 -->
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
          <a class="button" href="#">I'm looking for skilled staff</a>
        </div>
        <!-- /.col-lg-6 -->
      </div>
      <!-- /.row -->
    </div>
    <!-- /.container -->
  </div>
  <!-- /.banner-center -->
</section>
<!-- /.home-banner -->

jsFiddle also available here.

How do I go about aligning these up correctly and properly?

Thanks

Answer 1

Flex properties applies to its child. In your case container has three child so when you apply flex properties to container it align its child but actually you need to align child of child. So you need to reapply flex property to third row's child.

Flex property align equal dimension to all its child until specified. You need to apply some height to all child of container and then flex property of third row will work.

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.container > .banner-item {
  height: 10vh;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.container > .row:last-child {
  display: flex;
  flex-direction: column;
  height: 65vh;
  align-items: center;
  justify-content: center;
}
.container > .row:first-child {
  height: 15vh;
}