面包屑元素未与中心对齐

Question

I have used<center tag, text-align, margin 0 auto; and none of these options seem to work.

I have also tried div style="text-align:center;" just under and before ol but it doesn't seem to work either.

The CSS for breadcrumb-campaign-background is as follows:

 .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

If I understood your problem properlyUse the following code. Lmk if that works for you?

.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;
}

Here's Codepen link