Question

我有一面旗帜。

横幅的一个段落需要位于其顶部。

然后它有一些标题文本，标题文本需要集中对齐。

我很难将所有内容对齐到顶部和中心。

.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。

如何正确正确地对齐这些？

由于

Answer 1

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

Flex Box Align Top＆amp;对齐中心

1 个答案: