[英]How to vertically align icon font
我正在尝试垂直对齐字体图标。 我尝试过vertical-align: middle
但我总是有一点对齐差异。 以下示例有 2 种不同的图标使用方式,但它们没有正确对齐。
div { font-size: 50px; font-family: helvetica, arial, sans-serif; text-transform: uppercase; background: yellow; } .cart { margin-top: 20px; } .cart:before { font-family: "fanatic-icons" !important; font-weight: normal; content: "b"; margin-right: 5px; vertical-align: middle; text-transform: none; }
<link rel="stylesheet" type="text/css" href="https://fontastic.s3.amazonaws.com/PxvnwqrSXE7pXNDNDqGp4i/icons.css"> <div> <span class="icon icon-shopping-cart"></span> Shopping Cart </div> <div class="cart"> Shopping Cart </div>
您可以尝试vertical-align: text-bottom
或vertical-align: text-top
,具体取决于您觉得哪个更垂直居中。
对于您的购物车图标,似乎text-top
最垂直居中。
示例在: https : //jsfiddle.net/p3g189bg/
您可以尝试vertical-align:middle;
或line-height:1;
或使用padding
属性,您可以设置图标位置
使用vertical:middle;
示例vertical:middle;
属性 js 小提琴: http : //jsfiddle.net/vrcarwrj/
尝试使用line-height
属性
您可以将其设置为0.5,1,1.5
等
替代上述方法,使用您描述的 span 元素方法,您可以相对于其父 div 元素定位 span 标签。
喜欢:
div{
position: relative;
}
span.icon-shopping-cart{
position: relative;
top: 5px;
}
您可以尝试使用valign: middle
和/或然后将line-height
设置为 1px、1.5px 等。
另一个现在通过 Flexbox 的例子。
span { font-family: helvetica, arial, sans-serif; display: inline-flex; align-items: center; padding: 0 1rem; font-size: 3rem; line-height: 4rem; border: 1px solid #ffb0d1; } /* target all Font Awesome 5 <svg> tags */ .svg-inline--fa { padding-right: 1.5rem; }
<script src="https://use.fontawesome.com/releases/v5.12.1/js/all.js"></script> <span> <i class="fas fa-shopping-cart"></i> Shopping Cart </span>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.