Question

jsfiddle here

li a{
  vertical-align: middle;
  white-space: no-wrap;
  word-break: break-word;
  display: block;
}

.breadcrumb>li {
    display: inline-block;
    border-bottom: 1px solid #00bd71;
}

 <div class="articleBreadCrumb">
 <ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Inkontinenz bei <br> Männern</a></li>
  <li class="active"><a href="#">Buy Products</a></li>
</ol>
</div>

我不确定是否可以将第二项与其他项垂直居中对齐。到目前为止，它已按照我的CMS中的要求中断，我们将为列表项提供
一些内容。它需要垂直于其他项目居中对齐。预先感谢！

Answer 1

您有多种选择，这是一种弹性盒解决方案：

.breadcrumb {
    display: flex; /* that’s all */
    align-items: center; /* edit */
    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcrumb > li {
    border-bottom: 1px solid #00bd71;
}

.breadcrumb > li + li {
    margin-left: 1em;
}

.breadcrumb > li a {
    white-space: no-wrap;
    word-break: break-word;
    display: block;
    padding-bottom: .3em;
}

 <div class="articleBreadCrumb">
 <ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Inkontinenz bei <br> Männern</a></li>
  <li class="active"><a href="#">Buy Products</a></li>
</ol>
</div>

要求-Bootstrap Breadcrumb需要在每个列表项中以两行对齐，并且还必须与中心垂直对齐

1 个答案: