垂直对齐标题页元素

Question

我有标题标签，该标签在背景上具有完整的宽度/高度图像。

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

首先是图片，而不是文字，然后是按钮，然后是按钮，页面的最底部是滑块

除了滑块，我设法将所有内容放在下面的代码中

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

这是一个页面设计，这只是一个标题

感谢您的任何帮助 ：）

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

另外，在使用引导程序时，某些类可能会被覆盖，因此请确保在要强制设置的属性上使用!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