如何将旋转木马控制按钮居中？

Question

如何在滑动图像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>

Answer 1

我的建议是对子元素使用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>