如何使插入符号与面包屑中的文本垂直居中对齐？

Question

我有这个面包屑：

如您所见，右尖号位于顶部。不与文本垂直对齐。我尝试给他们padding，top，margin，但没有一个起作用。

body {
  font-family: "Open Sans", "Segoe UI", Halvetica, Arial, sans-serif;
  font-size: 16px;
}
.breadcrumbs {
    display: block;
    margin: 0;
    padding: 0;
}
ol, ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.item {
    display: inline-block;
    color: #848c98;
}

.item:not(:last-child):after {
    font-family: "Ionicons";
    margin: 0 .625rem;
    color: #a1a7af;
    content: "\f3d1";
}

<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>

<ol class="breadcrumbs">
    <li class="item"><a href="#">Home</a></li>
    <li class="item"><a href="#">About</a></li>
    <li class="item"><a href="#">Team</a></li>
    <li class="item is-active">Last</li>
</ol>

请参阅实时替代方法：https://codepen.io/anon/pen/MxzGXo

我如何在它们的顶部提供填充以使它们与文本垂直对齐？

Answer 1

您将要垂直对准克拉：

https://codepen.io/jgoncalves/pen/OqaZeN

body {
  font-family: "Open Sans", "Segoe UI", Halvetica, Arial, sans-serif;
  font-size: 16px;
}
.breadcrumbs {
    display: block;
    margin: 0;
    padding: 0;
}
ol, ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.item {
    display: inline-block;
    color: #848c98;
}

.item:not(:last-child):after {
    font-family: "Ionicons";
    margin: 0 .625rem;
    color: #a1a7af;
    content: "\f3d1";
    vertical-align: middle; /* this is new */
}

<ol class="breadcrumbs">
    <li class="item"><a href="#">Home</a></li>
    <li class="item"><a href="#">About</a></li>
    <li class="item"><a href="#">Team</a></li>
    <li class="item is-active">Last</li>
</ol>