CSS：在图像滑块问题中对齐图像

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

我尝试过很多事情，但我不知道如何做到这一点

主div有一个黑色的bg颜色，图像滑块div有一个红色的bg颜色，所以我可以看到对齐。我已经让图像滑块居中，但我不能让图像在图像滑块本身居中。它现在位于右边，没有居中

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规则：

• 字体大小：0

  在容器上，以消除从顶部的偏移。它是由于HTML代码中的空白而出现的。如果这些空白将具有高度

  0

  ，它们不会给您带来麻烦

• 填充：在
  上填充0

  ，以消除从左侧的偏移
  默认情况下，大多数浏览器都会提供特定的填充

---

您的

标记仍然在用户代理样式中定义了左填充。您需要重置它。

如果选择div，以下代码将解决您的问题

<div class="container">
    <div class="row">
        <div class="col-md-12">
         ...
        </div>
    </div>
</div>

...

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

<div class="container">
    <div class="row">
        <div class="col-md-12">
         ...
        </div>
    </div>
</div>