HTML / CSS：Bootstrap幻灯片轮播-居中对齐气泡编号

Question

如何在Bootstrap旋转木马幻灯片中居中对齐或底部对齐数字？ 我正在看这组代码以及特定的CSS属性？它是垂直对齐的中间吗？

现在我的数字在底部对齐： 代码很难复制，太多的scss文件，但是在保持气泡位置不变的同时，寻找了一种在气泡中移动数字的方法。

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

HTML：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>


<div id="myCarousel" class="carousel slide" data-ride="carousel" style= "width:500px">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active">1</li>
    <li data-target="#myCarousel" data-slide-to="1">2</li>
    <li data-target="#myCarousel" data-slide-to="2">3</li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&preset=gallery-tab-main-image" alt="Los Angeles">
    </div>

    <div class="item">
      <img src="https://statesymbolsusa.org/sites/statesymbolsusa.org/files/styles/symbol_thumbnail__medium/public/primary-images/Applesfreshpicked.jpg?itok=YmYkBfY7" alt="Chicago">
    </div>

    <div class="item">
      <img src="https://www.mcpl.us/sites/default/files/styles/large/public/bookstack.jpg?itok=pHICdzg9 alt="New York">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

CSS

.carousel-indicators li {
    text-indent: 0 !important;
    width: 24px !important;
    height: 24px !important;
    margin: 3px !important;
    border-radius: 50px !important;
    bottom:3px;
    font: 10px;
}

Answer 1

使用# In Python 3.7 from urllib import parse url_str = 'https://dapblobstorage.blob.core.windows.net/daps3blob/kuldeep/Depot - Week.xlsx' url_str_quoted = parse.quote(url_str, safe=':/') print(url_str_quoted) # The result is https://dapblobstorage.blob.core.windows.net/daps3blob/kuldeep/Depot%20-%20Week.xlsx # for En Dash print(parse.quote('Depot – Week.xlsx')) # The result is Depot%20%E2%80%93%20Week.xlsx 对齐项目。

flexbox