垂直对齐 header 个页面元素

Question

我有 header 标签，背景上有完整的 width/height 图片。

我需要完全按照图片所示在该页面的中心添加元素。

首先是图像，然后是文本，然后是一个接一个的按钮，页面的最底部是滑块

除了滑块，我还使用下面的代码将所有内容置于中心

此外，我正在使用 boostrap 和 jquery 如果需要

单页设计，这只是一个header

感谢您的帮助:)

    <header>
        <img src="" alt="full">
        <h1>The</h1>
        <a href="" class="btn btn-default btn-green" role="button">Login</a>
        <a href="" class="btn btn-default btn-grey" role="button">Browse</a>
        <div class="swiper-container">
        </div>
    </header>

SCSS

header {
    margin-top: -56px !important;
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../img_cover_m.jpg);
    background-size: cover;
    background-position: center;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;

    img {
        margin-top: 5%;
        max-width: 50%;
        height: auto;
    }

    h1 {
        color: #fff;
    }

    .btn {
        @include Myriad-Pro-Light;
    }

    .btn-green {
        margin-top: 5%;
        color: #fff;
    }

    .btn-grey {
        color: #000;
    }

    .swiper-container {
        margin-top: 5%;
        width: 100%;
        height: 300px;
    } 
}

Answer 1

您可以通过在适当的地方使用以下属性来实现此目的。

text-align:center;
display:flex;
align-center;
margin:0 auto;

另外，由于您使用 bootstrap，因此某些类可能会被覆盖，因此请确保对要强制设置的属性使用 !important。

使用您的代码，我根据上述建议进行了一些更改，代码如下：

<header>
    <img src="http://placehold.it/350x150" alt="full">
    <h1>The</h1>
    <a href="" class="btn btn-default btn-green" role="button">Login</a>
    <a href="" class="btn btn-default btn-grey" role="button">Browse</a>
    <div class="swiper-container">
      <p>Large full width div, which must stay on the bottom of the header tag</p>
    </div>
</header>

header {
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../img_cover_m.jpg);
background-size: cover;
background-position: center;
height: 100vh;
min-width: 20%;
display: flex;
flex-direction: column;
align-items: center;
}
img {
  margin: 0 auto;
  display: block;
  max-width: 50%;
  height: auto;
}

h1 {
    color: #fff;
  text-align:center;
}

.btn {
  @include Myriad-Pro-Light !important;
  margin: 10px auto !important;
  display: block !important;
  width: 25vw !important;
  text-align:center !important;
  padding: 6px 0px !important;
}

.btn-green {
    color: #fff;
  display:block;
}

.btn-grey {
    color: #000;
  display:block;
}

.swiper-container {
    background-color:red;
    width: 100%;
    height: 300px;
    position:absolute;
    bottom:0;
    display: flex;
    align-items: center;
    justify-content: center
} 

.swiper-container p{
  @include Myriad-Pro-Light !important;
    margin:0 auto;
    color:white;
  font-size: 18px;
}

这是使用此代码的示例。 http://codepen.io/Nasir_T/pen/PboZme

垂直对齐 header 个页面元素

Vertical align header page elements

html

css

position

flexbox