jquery - 如何将轮播控制按钮居中？

如何将轮播控制按钮调整到滑动图像div标记的中心？唯一喜欢的是“浮动”到左侧，除非当我使用float:left CSS属性时，它们是垂直而不是水平的-我在做什么错了？

.main-carousel-indicators {
    align-content: center!important;
    justify-content: center!important;
}
.main-carousel-indicators li {
    height: 14px;
    width: 14px;
    display: block!important;
    margin: 2px;
    padding: 0;
    border-style: none;
    background-color: #219cdd!important;
    transition: all 0.25s ease;
    float: left;
}
.main-carousel-indicators .active {
    height: 14px;
    width: 14px;
    display: block;
    background-color: #0D0155!important;
    margin: 2px;
    padding: 0;
    border-style: none;
}

<div class="row">
   <div class="col-md-12">
      <div class="bs-example" data-example-id="simple-carousel">
         <div class="carousel slide" id="carousel-example-generic-main" data-ride="carousel" data-pause="hover" data-duration="1000">
            <ol class="carousel-indicators main-carousel-indicators">
               <li data-target="#carousel-example-generic-main" data-slide-to="0" class="active"></li>
               <li data-target="#carousel-example-generic-main" data-slide-to="1" class=""></li>
               <li data-target="#carousel-example-generic-main" data-slide-to="2" class=""></li>
               <li data-target="#carousel-example-generic-main" data-slide-to="3" class=""></li>
            </ol>
         </div>
      </div>
   </div>
</div>

最佳答案

我的建议是对于子元素使用line-block代替block，对于父元素使用text-align:center：

.main-carousel-indicators {
    align-content: center!important;
    justify-content: center!important;
    text-align: center;
}
.main-carousel-indicators li {
    height: 14px;
    width: 14px;
    display: inline-block;
    padding: 0;
    border-style: none;
    background-color: #219cdd!important;
    transition: all 0.25s ease;
}
.main-carousel-indicators .active {
    height: 14px;
    width: 14px;
    background-color: #0D0155!important;
    padding: 0;
    border-style: none;
}

<div class="row">
   <div class="col-md-12">
      <div class="bs-example" data-example-id="simple-carousel">
         <div class="carousel slide" id="carousel-example-generic-main" data-ride="carousel" data-pause="hover" data-duration="1000">
            <ol class="carousel-indicators main-carousel-indicators">
               <li data-target="#carousel-example-generic-main" data-slide-to="0" class="active"></li>
               <li data-target="#carousel-example-generic-main" data-slide-to="1" class=""></li>
               <li data-target="#carousel-example-generic-main" data-slide-to="2" class=""></li>
               <li data-target="#carousel-example-generic-main" data-slide-to="3" class=""></li>
            </ol>
         </div>
      </div>
   </div>
</div>

关于jquery - 如何将轮播控制按钮居中？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43536666/