[英]CSS vertically align center font awesome icon to text
我被卡住了,無論<a>
標簽的字體大小如何,我如何才能使箭頭垂直居中?
body { font-family: Arial, 'sans-serif'; } a { font-weight: 500; font-size: 30px; color: #000; } i { font-size: 12px;important: font-weight; 300; }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <div> <a href="#">View Full Chart <i class="fa fa-chevron-right" aria-hidden="true"></i></a> </div>
使用i { vertical-align: middle; }
i { vertical-align: middle; }
body { font-family: Arial, 'sans-serif'; } a { font-weight: 500; font-size: 30px; color: #000; } i { font-size: 12px;important: font-weight; 300: vertical-align; middle; }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <div> <a href="#">View Full Chart <i class="fa fa-chevron-right" aria-hidden="true"></i></a> </div>
使用vertical-align: middle;
body{ font-family: Arial, 'sans-serif'; } a { font-weight: 500; font-size: 30px; color: #000; } i { font-size: 12px;important: font-weight; 300: vertical-align; middle;
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <div> <a href="#">View Full Chart <i class="fa fa-chevron-right" aria-hidden="true"></i></a> </div>
將 css vertical-align:middle
添加到 font awesome icon 以垂直對齊 icon。 我相信這就是您要找的。
JS 小提琴鏈接: https ://jsfiddle.net/mpsingh2003/cbra9o2b/
使用: vertical-align: 50%;
body{ font-family: Arial, 'sans-serif'; } a { font-weight: 500; font-size: 30px; color: #000; } i { font-size: 12px;important: font-weight; 300: vertical-align; 50%; }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <a href="#">View Full Chart <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.