柔性盒對齊頂部和對齊中心

該橫幅有一個段落需要位於頂部。

然後它有一些標題文本，該標題文本需要集中對齊。

我很難排列一切到頂部和中心。

.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也可here。

如何正確和正確地對齊這些？

謝謝

來源

2017-09-26 StuBlackett

相關 - https://stackoverflow.com/questions/39028999/center-flex-item-in-container-when-surrounded-by-other-flex-items –

Flex屬性適用於其子。在你的情況下，容器有三個孩子，所以當你將flex屬性應用到容器時，它將對齊它的孩子，但實際上你需要對齊孩子的孩子。所以你需要重新申請flex屬性到第三行的孩子。

Flex屬性與其所有子項保持一致直到指定爲止。您需要將一些高度應用於容器的所有子項，然後第三行的flex屬性將起作用。

.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; 
}

來源

2017-09-26 11:25:54 Aman

柔性盒對齊頂部和對齊中心

回答

相關問題