[英]How to align carets vertically centered with text in breadcrumbs?
I have this breadcrumbs: 我有以下面包屑:
As you can see right carets are stay at top. 如您所见,右尖号位于顶部。 Not aligned with text vertically.
不与文本垂直对齐。 I tried giving them
padding
, top
, margin
but none of them worked. 我尝试给它们
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>
See Live Alternative: https://codepen.io/anon/pen/MxzGXo 请参阅实时替代方法: https : //codepen.io/anon/pen/MxzGXo
How can I give them a padding on top so they align vertically with text? 我如何在它们的顶部提供填充,以便它们与文本垂直对齐?
You are going to want to vertically align the carat: 您将要垂直对齐克拉:
https://codepen.io/jgoncalves/pen/OqaZeN 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.