面包屑元素没有对齐到中心

Question

我有used

我也尝试过div style=“文本对齐:中心”，就在ol下面和之前，但是它似乎也不起作用。

面包屑-运动背景的CSS如下所示：

​

.breadcrumb-campaign li {
  font-size: 14px !important; 
  margin: 0 auto; 
  text-align: center;
}

.breadcrumb-campaign-background {
  background-color: #111 !important; 
  margin-bottom: -70px; 
  margin-left: -15px;
}

.breadcrumb-campaign-background-first {
  background-color: #111 !important; 
  margin-left: 125px; 
  margin-bottom: -70px;
}

<div class="container-700">
  <div class="maison breadcrumb-campaign container">
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb breadcrumb-campaign-background" style="text-align: center">
        <li class="breadcrumb-item"><a href="#stopcoopspying">Stop Co-op Spying</a></li>
        <li class="breadcrumb-item"><a href="#email">Email Co-Op Now</a></li>
        <li class="breadcrumb-item"><a href="#take-action">Spread the Word</a></li>             
        <li class="breadcrumb-item"><a href="#email">Take Action</a></li>   
        <li class="breadcrumb-item"><a href="#leaflet">Get the Leaflet</a></li>
      </ol>
    </nav>
  </div>
</div>

​

Answer 1

如果我理解您的问题，请properlyUse下面的代码。如果这对你有用的话？

.breadcrumb-campaign li {
  font-size: 14px !important;
  margin: 0 auto;
  text-align: center;
  list-style-type: none;
  display: inline-block;
  margin: 20px 0px;
}
.breadcrumb-campaign li:not(:last-child)::after {
  /*   You may use arrow icon here */
  content: ">";
  margin: 0 5px;
}

这是Codepen链接