CSS：在圖像滑塊問題中對齊圖像

Question

我在學習如何製作各種圖像滑塊，並且遇到的問題是，我無法弄清楚如何在我的「圖像滑塊」中正確對齊圖像。

我試過很多東西，我只是不理解如何做到這一點。

主div有一個黑色的bg顏色，圖像滑塊div有一個紅色的bg顏色，所以我可以看到對齊。我有圖像滑塊居中等，但我不能讓圖像中心在圖像滑塊本身。它目前正處於不正確的狀態。

https://jsfiddle.net/5gn40f3z/2/

HTML

<div id="sliderContainer"> 
    <div id="slideWrapper"> 
     <ul id="slide"> 
      <li><img src="https://placeimg.com/800/300/any"></li> 
      <li><img src="https://placehold.it/800x300"></li> 
      <li><img src="https://placehold.it/800x300"></li> 
      <li><img src="https://placehold.it/800x300"></li> 
      <li><img src="https://placehold.it/800x300"></li> 
     </ul> 
     <span class="slideNav" id="previous"></span> 
     <span class="slideNav" id="next"></span> 
    </div> 
</div> 

CSS

#sliderContainer{ 
    background-color: black; 
    max-width: 100%; 
    height: 300px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

#slideWrapper{ 
    background-color: red; 
    width: 800px; 
    height: 300px; 
    margin: 0 auto; 
} 

#slideWrapper li{ 
    list-style-type: none; 
    padding: 0; 
    maring: 0 auto; 
} 

我怎樣才能做到這一點？

Answer 1

您需要添加下面的CSS規則：

#sliderContainer { 
    font-size: 0; 
} 
#slide { 
    padding: 0; 
} 

Demo on JSFiddle。

• font-size: 0上的容器，以消除頂部的偏移。它看起來是由於HTML代碼中的空白。如果這些空格將具有高度0，那麼它們不會造成麻煩。
• padding: 0在您的<ul>消除左偏移。 <ul>默認爲大多數瀏覽器提供的特定填充。更多W3Schools。

Answer 2

您的<ul id="slide">標記仍然在用戶代理樣式中定義了左填充。你需要重置它。