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

请检查代码段

.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

我总是尝试使用此代码来引导4个轮播指标，并将其对准所有屏幕的轮播指标：

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

Bootstrap轮播指示器“text-align：center”不起作用

2 个答案: