垂直整列ヘッダーページ要素

Question

ヘッダータグがあります。ヘッダータグは、背景に全幅/高さイメージがあります。

図のように、そのページの中央にアルギンの要素が必要です。スライダー

離れスライダーから

最初に別のものの後に、ページの一番下にあるボタン1よりも、テキストよりも、イメージを行くですが、私は

以下のコードを持つセンターにすべてのコンテンツを置くことができました

それは1つのページのデザインだ

を必要に応じて、私はブートストラップと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