当数字图像（项目）可变时，如何将我的指示器项目置于滑块的中心？

Question

我有一个焦点图像居中的滑块，但我无法将指示器项目（点）居中，因为每个滑块都有不同数量的图像。这是我的 HTML 滑块和指标：

<div class="main">
<section id="slider" >
<div class="container-fluid">      
    <div class = 'responsiveHeight'>
        <div class = 'inner'>
            <div class = 'iosSlider'>
                <div class = 'slider'>
                <img class="item selected" src="/park-terrace/00-park-terrace.jpg" alt="Park Terrace"/>
                <img class="item " src="/park-terrace/01-park-terrace.jpg" alt="Park Terrace"/>
                <img class="item " src="/park-terrace/02-park-terrace.jpg" alt="Park Terrace"/>
                </div>
            </div>
        </div>
        <div class="prevButton"></div>
        <div class="nextButton"></div>
    </div>
</div> <!-- /.container -->
<div class = 'indicators'>
    <div class = 'item selected'></div>
    <div class = 'item'></div>
    <div class = 'item'></div>
</div>
</section>

这是我的 CSS:

    .main {height:432px;}
#slider {
        position:absolute;
        top:100px;
        left:0px; 
        width:100%;
        color:#666;
        z-index:1;
    }
.responsiveHeight {
        height: 0;
        padding: 0 0 80% 0; 
        position: relative;
        overflow:hidden;
        }
.responsiveHeight > .inner {
        position: absolute;
        width: 100%;
        height: 100%;
        }
.iosSlider {
        width: 100%;
        height: 100%;
        }
.iosSlider .slider {
        width: 100%;
        height: 100%;
        }
.iosSlider .slider img {
        height: 100%;
        padding-right:2px;
        }


.indicators {
    position: relative;
    top: 10px;
    left: 150px;
    width: 400px;
    height: 10px;
    margin: 0 auto;
    z-index: 10;
}

.indicators .item {
    float: left;
    width: 12px;
    height: 12px;
    margin: 0 5px 0 0;
    border-radius: 10px;
    background-color:#666;
}

问题示例如下：

small number of images large number of images

我希望有一种方法可以调整我的 css 而不是使用 javascript。我乐于接受任何建议，感谢您的帮助。

Answer 1

如果我没理解错的话，我们可以将其分解为 'indicators'。您可以使用 flexbox 在中心弹出这些：

.indicators {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 40px 0;
}

.indicators .item {
    width: 12px;
    height: 12px;
    margin: 0 5px 0 0;
    border-radius: 10px;
    background-color:#666;
}

<div class='indicators'>
    <div class='item selected'></div>
    <div class='item'></div>
    <div class='item'></div>
</div>

当数字图像（项目）可变时，如何将我的指示器项目置于滑块的中心？

How do I center my indicator items in a slider when the number images (items) is variable?

css

slider

indicator

centering