如何居中Photoslideshow

我無法居中我的photoslideshow .... 我希望你們能幫助我。如何居中Photoslideshow

Photoslideshow在HTML：

<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>

來源

2017-01-09 Nigel

請爲w3-content w3-section添加樣式定義 – Ruby

這裏，Flexbox的建議（我使用了不同大小的圖像，就像證明他們確實滑動）：

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>

來源

2017-01-09 12:55:24 Syden

試試這個

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

來源

2017-01-09 12:58:56 Ruby

使用margin: auto;和display: block; style對於中心圖像。看到這裏顯示中心圖像。 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>

來源

2017-01-09 13:02:23

嘗試的造型與 '中央級'。

<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>

來源

2017-01-09 13:16:02

如何居中Photoslideshow

回答

相關問題