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

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>