引导转盘-指示器"text-align:center“不工作

Question

我试图让我的旋转木马指示器对齐到屏幕的中心，但是text-align:center没有对指示器的位置做任何事情。其他一切都运行得很完美。知道为什么吗？谢谢。

HTML：

<ol class="carousel-indicators">
  <li data-target="#home-carousel" data-slide-to="0" class="active"></li>
  <li data-target="#home-carousel" data-slide-to="1"></li>
  <li data-target="#home-carousel" data-slide-to="2"></li>
</ol>

CSS：

.carousel-indicators {
    position: absolute;
    bottom:10px;
    right:0px;
    width:100%;
    height:10px;
    margin-right:50%;
    margin-left:50%;
    text-align:center;
    list-style: none;
    top: auto;
    padding: 0 0 15px 0;
    z-index:5;  
}

Answer 1

请检查一下spippet

​

.carousel {
    position: relative;
    height: 200px;
    background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<div id="myCarousel1" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
  <li data-target="#home-carousel" data-slide-to="0" class="active"></li>
  <li data-target="#home-carousel" data-slide-to="1"></li>
  <li data-target="#home-carousel" data-slide-to="2"></li>
</ol>
    
</div>

​

Answer 2

我总是为bootstrap 4 carousel指示器尝试此代码，并且它将所有屏幕的carousel指示器居中对齐：

.carousel-indicators li {
    position: relative;
    left: 20px;
}