Photoslideshowをセンターに置く方法

Question

私はphotoslideshowを中心にすることに問題があります.... 皆さんが私を助けてくれることを願っています。

HTMLでPhotoslideshow：

ここ

<div class="w3-content w3-section" style="max-width:500px"> 
    <img class="mySlides" src="4.jpg"> 
    <img class="mySlides" src="3.jpg"> 
    <img class="mySlides" src="2.jpg"> 
</div> 

<script> 
    var myIndex = 0; 
    carousel(); 

    function carousel() { 
     var i; 
     var x = document.getElementsByClassName("mySlides"); 
     for (i = 0; i < x.length; i++) { 
      x[i].style.display = "none"; 
     } 
     myIndex++; 
     if (myIndex > x.length) { myIndex = 1 } 
     x[myIndex - 1].style.display = "block"; 
     setTimeout(carousel, 2500); 
    } 
</script> 

Answer 1

フレキシボックスの提案（私は彼らが実際にスライディングしている証拠として、異なるサイズの画像を使用）：

var myIndex = 0; 
 
carousel(); 
 

 
function carousel() { 
 
    var i; 
 
    var x = document.getElementsByClassName("mySlides"); 
 
    for (i = 0; i < x.length; i++) { 
 
    x[i].style.display = "none"; 
 
    } 
 
    myIndex++; 
 
    if (myIndex > x.length) { 
 
    myIndex = 1 
 
    } 
 
    x[myIndex - 1].style.display = "block"; 
 
    setTimeout(carousel, 2500); 
 
}

.w3-content { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: center; 
 
}

<div class="w3-content w3-section"> 
 
    <img class="mySlides" src="https://placehold.it/100x100"> 
 
    <img class="mySlides" src="https://placehold.it/150x150"> 
 
    <img class="mySlides" src="https://placehold.it/200x200"> 
 
</div>

Answer 2

この

をお試しください

<style> 
.w3-content { 
    display: flex; 
    flex-flow: row wrap; 
    justify-content: center; 
    margin: 0 auto; 
} 
</style> 

Answer 3

margin: auto;およびdisplay: block;スタイルを使用します。ディスプレイセンターイメージについてはこちらをご覧ください。 http://www.w3schools.com/css/css_align.asp。

は、CSSスタイルの下に試してみてください。

.w3-content img{ 
     display: block; 
     margin:0 auto; 
} 

デモ

var myIndex = 0; 
 
carousel(); 
 

 
function carousel() { 
 
    var i; 
 
    var x = document.getElementsByClassName("mySlides"); 
 
    for (i = 0; i < x.length; i++) { 
 
    x[i].style.display = "none"; 
 
    } 
 
    myIndex++; 
 
    if (myIndex > x.length) { 
 
    myIndex = 1 
 
    } 
 
    x[myIndex - 1].style.display = "block"; 
 
    setTimeout(carousel, 2500); 
 
}

.w3-content img{ 
 
    display: block; 
 
    margin:0 auto; 
 
}

<div class="w3-content w3-section"> 
 
    <img class="mySlides" src="https://placehold.it/100x100"> 
 
    <img class="mySlides" src="https://placehold.it/150x150"> 
 
    <img class="mySlides" src="https://placehold.it/200x200"> 
 
</div>

Answer 4

は 'センタークラス' でスタイリングしてみます。

<div class="w3-content w3-section center-class" style="max-width:500px"> 
    <img class="mySlides" src="4.jpg" > 
    <img class="mySlides" src="3.jpg" > 
    <img class="mySlides" src="2.jpg" > 
</div> 

<style> 
    .center-class{ 
     display:block; 
     margin-left:auto; 
     margin-right:auto; 
    } 
</style>