圖片中間的中央按鈕

我嘗試製作將位於圖片中間的按鈕，但問題在於這些按鈕位於頁面中間或圖片下方。任何建議如何解決它，我做錯了什麼？ https://jsfiddle.net/m5g16vt7/圖片中間的中央按鈕

* { 
 
    box-sizing: border-box 
 
} 
 

 
body { 
 
    font-family: Verdana, sans-serif; 
 
    margin: 0 
 
} 
 

 
imageSlide-container { 
 
    max-width: 1000px; 
 
    position: relative; 
 
    margin: auto; 
 
} 
 

 
.prev, 
 
.next { 
 
    cursor: pointer; 
 
    position: absolute; 
 
    top: 50%; 
 
    width: auto; 
 
    padding: 16px; 
 
    margin-top: -22px; 
 
    color: pink; 
 
    font-weight: bold; 
 
    font-size: 18px; 
 
    transition: 0.6s ease; 
 
    border-radius: 0 3px 3px 0; 
 
} 
 

 
.next { 
 
    right: 0; 
 
    border-radius: 3px 0 0 3px; 
 
} 
 

 
.prev:hover, 
 
.next:hover { 
 
    background-color: rgba(0, 0, 0, 0.8) 
 
} 
 

 
@media only screen and (max-width: 300px) { 
 
    .prev, 
 
    .next, 
 
    .text { 
 
    font-size: 11px 
 
    } 
 
}

<div class="imageSlide-container"> 
 
    <img class="imageSlide" src="img_nature_wide.jpg" style="width: 100%"> 
 

 
    <a class="prev" onclick="plusSlide-button(-1)">&#10094;</a> 
 
    <a class="next" onclick="plusSlide-button(1)">&#10095;</a> 
 
</div>

來源

2017-07-06 Marek

你忘了點添加到類.imageSlide容器。 –

投票結束，因爲這個問題是由於無法再現的問題或簡單的印刷錯誤造成的。雖然類似的問題可能在這裏討論，但這個問題的解決方式不太可能有助於未來的讀者。 –

檢查貝爾的盈方（。）流片斷

* {box-sizing:border-box} 
 
\t \t \t body {font-family: Verdana,sans-serif;margin:0} 
 
      
 
     .imageSlide-container { 
 
      max-width: 1000px; 
 
      position: relative; 
 
      margin: auto; 
 
      } 
 
      
 
\t \t \t .prev, .next { 
 
\t \t \t \t cursor: pointer; 
 
\t \t \t \t position: absolute; 
 
     top: 50%; 
 
\t \t \t \t width: auto; 
 
\t \t \t \t padding: 16px; 
 
\t \t \t \t margin-top: -22px; 
 
\t \t \t \t color: pink; 
 
\t \t \t \t font-weight: bold; 
 
\t \t \t \t font-size: 18px; 
 
\t \t \t \t transition: 0.6s ease; 
 
\t \t \t \t border-radius: 0 3px 3px 0; 
 
     transform: translateY(-50%;) 
 
\t \t \t } 
 
\t \t \t .next { 
 
\t \t \t \t right: 0; 
 
\t \t \t \t border-radius: 3px 0 0 3px; 
 
\t \t \t } 
 
\t \t \t .prev:hover, .next:hover { 
 
\t \t \t \t background-color: rgba(0,0,0,0.8) 
 
\t \t \t } 
 
      @media only screen and (max-width: 300px) { 
 
    \t \t \t \t .prev, .next,.text {font-size: 11px} 
 
    \t \t \t }

<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<div class="imageSlide-container"> 
 
\t \t \t <img class="imageSlide" src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width: 100%"> 
 

 
     <a class="prev" onclick="plusSlide-button(-1)">&#10094;</a> 
 
     <a class="next" onclick="plusSlide-button(1)">&#10095;</a> 
 
</div>

你忘了在CSS 類名imageSlide-container之前添加.，你需要添加transform: translateY(-50%;)和top:50%調整箭垂直居中。

來源

2017-07-06 11:53:55

你錯過了在CSS點：

.imageSlide-container { 
    max-width: 1000px; 
    position: relative; 
    margin: auto; 
}

來源

2017-07-06 11:50:06

加點imageSlide容器

.imageSlide-container { 
      max-width: 1000px; 
      position: relative; 
      margin: auto; 
}

來源

2017-07-06 11:52:26 Santhoshkumar

看看這個。但是，如果要將按鈕放置在圖像的中心位置，只需調整頂部邊距，如果左側或右側僅更改文本對齊屬性。

 <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
     * {box-sizing:border-box} 
 
\t \t \t body {font-family: Verdana,sans-serif;margin:0} 
 
      
 
      imageSlide-container { 
 
\t \t \t \t max-width: 1000px; 
 
\t \t \t \t position: relative; 
 
\t \t \t \t margin: auto; 
 
      } 
 
     .buttons{ 
 
     text-align: center; 
 
     margin-top: -45px; 
 
     } 
 
\t \t \t .prev, .next { 
 
\t \t \t \t cursor: pointer; 
 
     top: 50%; 
 
\t \t \t \t width: auto; 
 
\t \t \t \t padding: 16px; 
 
\t \t \t \t color: pink; 
 
\t \t \t \t font-weight: bold; 
 
\t \t \t \t font-size: 18px; 
 
\t \t \t \t transition: 0.6s ease; 
 
\t \t \t \t border-radius: 0 3px 3px 0; 
 
\t \t \t } 
 
\t \t \t .next { 
 
\t \t \t \t right: 0; 
 
\t \t \t \t border-radius: 3px 0 0 3px; 
 
\t \t \t } 
 
\t \t \t .prev:hover, .next:hover { 
 
\t \t \t \t background-color: rgba(0,0,0,0.8) 
 
\t \t \t } 
 
      @media only screen and (max-width: 300px) { 
 
    \t \t \t \t .prev, .next,.text {font-size: 11px} 
 
    \t \t \t }

<div class="imageSlide-container"> 
 
\t \t \t <img class="imageSlide" src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width: 100%"> 
 

 
     <div class="buttons"> 
 
     <a class="prev" onclick="plusSlide-button(-1)">&#10094;</a> 
 
     <a class="next" onclick="plusSlide-button(1)">&#10095;</a> 
 
     </div> 
 
</div>

來源

2017-07-06 12:01:40 shahjahan

圖片中間的中央按鈕

回答

相關問題