は...私は、このモックアップをやろうとしているのdivブートストラップ

Question

上の2つのボタンを中心に

...と私は、画像の上にこれらの2つのボタンを配置する必要がありポイントに来ました。私は1つのボタンを置くことができたが、2番目のボタンは機能していない。これは最初のボタンのコードです。

#img_container { 
 
    position:relative; 
 
    display:block; 
 
    text-align:center; 
 
} 
 
.button { 
 
    position:absolute; 
 
    bottom:50%; 
 
    right:50%; 
 
    width:200px; 
 
    height:50px; 
 
    margin:0px -100px -15px 0px; 
 
    background-color: rgb(246, 175, 228); 
 
    border: none; 
 
    box-shadow: 4.5px 7.794px 5px 0px rgba(0, 0, 0, 0.094);; 
 
    font-size: 1.3em; 
 
    color: white; 
 
    text-transform: uppercase; 
 
}

<div id="img_container" class=" "text-center col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
 
    <img src="img/homepicture.jpg"/> 
 
    <button class="button">lazybop</button><br> 
 
    <button class="button1">see the products</button> 
 
</div>

それから私は、同じコードを使用しようとしましたが、わずか40％とbottomプロパティの数を減らし、それはまだ同じ場所に残っています。

.button1 { 
    position:absolute; 
    bottom:40%; 
    right:50%; 
    width:200px; 
    height:50px; 
    background-color: rgb(246, 175, 228); 
    border: none; 
    box-shadow: 4.5px 7.794px 5px 0px rgba(0, 0, 0, 0.094);; 
    font-size: 1.3em; 
    color: white; 
    text-transform: uppercase; 
} 

Answer 1

あなたはクラスで

class=**" "**text-center col-lg-12 col-md-12 col-sm-12 col-xs-12"> 

Answer 2

<div id="img_container" class="text-center col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
 
    <img src="img/homepicture.jpg"/> 
 
    <button class="button">lazybop</button><br> 
 
    <button class="button1">see the products</button> 
 
</div>

を間違えていたクラスでは「単一を削除するか、上記のコード

http://quandaflow.com/category/website/css/

をコピー＆ペースト

Answer 3

ここでそれを行う方法です：

は、コンテナの上に背景画像を<img>を交換し、そして100vhで、デバイスの高さと、このコンテナの高さを定義します。

<div id="img_container" class="text-center col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
    <div id="button-container"> 
      <button class="button button1">lazybop</button> 
      <button class="button button2">see the products</button> 
    </div> 

</div> 

#img_container { 
    background-image: url("http://www.w3schools.com/css/img_fjords.jpg"); 
    background-repeat:no-repeat; 
    background-size:cover; 
    height:100vh; 
    position:relative; 

    /* Flexbox part, to align the button vertically : */ 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
} 

#button-container{ 
    position:relative; 
} 
.button { 
    position:absolute; 
    left:50%; 
    width:200px; 
    height:50px; 
    background-color: rgb(246, 175, 228); 
    border: none; 
    box-shadow: 4.5px 7.794px 5px 0px rgba(0, 0, 0, 0.094);; 
    font-size: 1.3em; 
    color: white; 
    text-transform: uppercase; 
} 
.button1{ 
    margin-left:-100px; 
    z-index:10; 
} 

.button2{ 
    top:50px; 
} 

ここJsFiddleです：DEMO

注：私はフレキシボックスを使用し、縦方向にボタンを中央には。 しかし、あなたはフレキシボックスを使用したくない場合、あなたはそれを変換して置き換えることができます。

.parent { 
    position: relative; 
} 
.child { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
}