需求

Question

小提琴手

​

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>

​