センターは絶対に配置<a>絶対配置された画像

Question

私は画像の中央に配置されるテキストを作ろうとしますが、私の試みではサイズ変更のウェブサイトで作れないという問題があります。どのようにそれを修正するための提案と私は間違って何ですか？

* {box-sizing:border-box} 
 
body {font-family: Verdana,sans-serif;margin:0} 
 

 
.imageSlide-container { 
 
    position: relative; 
 
    margin: auto; 
 
} 
 
.imageSlide { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: auto; 
 
    opacity: 0; 
 
    z-index: 1; 
 

 
    -webkit-transition: opacity 2.5s; 
 
    -moz-transition: opacity 2.5s; 
 
    -o-transition: opacity 2.5s; 
 
    transition: opacity 2.5s; 
 
} 
 
.showing { 
 
    opacity: 1; 
 
    z-index: 2; 
 
} 
 
      
 
.prev, .next { 
 
    z-index: 3; 
 
    position: absolute; 
 
    top: 50%; 
 
    width: auto; 
 
    cursor: pointer; 
 
    color: red; 
 
    /*margin-top: -22px;*/ 
 
    padding: 15px; 
 
    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 showing" src="https://www.w3schools.com/howto/img_nature_wide.jpg"> 
 
    <img class="imageSlide" src="https://www.w3schools.com/howto/img_fjords_wide.jpg"> 
 
    <img class="imageSlide" src="https://www.w3schools.com/howto/img_mountains_wide.jpg"> 
 

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

Answer 1

は私が.showingするposition: staticを追加することでそれを解決しましたあなたが見る画像はposition: absoluteに設定されていない可能性があるので、ボタンのコードtop: 50%は何かから来る可能性があります。

* {box-sizing:border-box} 
 
body {font-family: Verdana,sans-serif;margin:0} 
 

 
.imageSlide-container { 
 
    position: relative; 
 
    margin: auto; 
 
} 
 
.imageSlide { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: auto; 
 
    opacity: 0; 
 
    z-index: 1; 
 

 
    -webkit-transition: opacity 2.5s; 
 
    -moz-transition: opacity 2.5s; 
 
    -o-transition: opacity 2.5s; 
 
    transition: opacity 2.5s; 
 
} 
 
.showing { 
 
    position: static; 
 
    opacity: 1; 
 
    z-index: 2; 
 
} 
 
      
 
.prev, .next { 
 
    z-index: 3; 
 
    position: absolute; 
 
    top: 50%; 
 
    width: auto; 
 
    cursor: pointer; 
 
    color: red; 
 
    margin-top: -22px; 
 
    padding: 15px; 
 
    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 showing" src="https://www.w3schools.com/howto/img_nature_wide.jpg"> 
 
    <img class="imageSlide" src="https://www.w3schools.com/howto/img_fjords_wide.jpg"> 
 
    <img class="imageSlide" src="https://www.w3schools.com/howto/img_mountains_wide.jpg"> 
 

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

Answer 2

これは以下のコメントから、あなたのコードを使用して更新されたバージョンですが、私は.imageSlideにtop:0を追加し、最後の画像の問題をドロップスライダーを解決しました。

https://jsfiddle.net/k391zyn1/3/

HTML：

<div class="imageSlide-container"> 
    <img class="imageSlide showing" src="https://www.w3schools.com/howto/img_nature_wide.jpg"> 
    <img class="imageSlide" src="https://www.w3schools.com/howto/img_fjords_wide.jpg"> 
    <img class="imageSlide" src="https://www.w3schools.com/howto/img_mountains_wide.jpg"> 

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

CSS：

* {box-sizing:border-box} 
body {font-family: Verdana,sans-serif;margin:0} 

.imageSlide-container { 
    position: relative; 
    margin: auto; 
} 
.imageSlide { 
    position: absolute; 
    top:0; 
    width: 100%; 
    height: auto; 
    opacity: 0; 
    z-index: 1; 

    -webkit-transition: opacity 2.5s; 
    -moz-transition: opacity 2.5s; 
    -o-t ransition: opacity 2.5s; 
    transition: opacity 2.5s; 
} 
.showing { 
    position: static; 
    opacity: 1; 
    z-index: 2; 
} 


.prev, .next { 
    z-index: 3; 
    position: absolute; 
    top: 50%; 
    width: auto; 
    cursor: pointer; 
    color: red; 
    margin-top: -22px; 
    padding: 15px; 
    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} 
} 

のjavascript：

var slides = document.querySelectorAll('.imageSlide'); 
    var currentSlide = 0; 
    var slideInterval = setInterval(nextSlide,3000); 

    function nextSlide(){ 
     slides[currentSlide].className = 'imageSlide'; 
     currentSlide = (currentSlide+1)%(slides.length); 
     console.log('currentSlide',currentSlide); 
     slides[currentSlide].className = 'imageSlide showing'; 
    }