Question

我正在尝试学习如何制作各种图像滑块以及我遇到的问题，我无法弄清楚如何在我的“图像滑块”中正确对齐我的图像。

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

主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

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

W3Schools

Answer 2

您的<ul id="slide">标记仍然在用户代理样式中定义了左边距。你需要重置它。

Answer 3

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

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

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

3 个答案: