圍繞股利引導

Question

我試圖做到這一點樣機2個按鈕......

...我來到這裏，我需要把圖像上的這些按鍵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％，但它仍然在同一個地方。

.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

注意：垂直居中的按鈕，我用Flexbox的。 但是，如果你不想使用Flexbox的，你可以取代它與改造：

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