CSS:在图像 slider 问题中对齐图像

Question

我正在尝试学习如何制作各种图像 slider ，但我遇到的问题是，我不知道如何在我的“图像 slider ”中正确对齐我的图像。

我已经尝试了很多事情，但我只是不明白如何实现这一目标。

主 div 的 bg 颜色为黑色，图像 slider div 的 bg 颜色为红色，因此我可以看到对齐方式。我已经将图像 slider 居中等等，但我无法让图像在图像 slider 本身中居中。它目前不在右边。

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 .