CSS垂直对齐中心字体真棒图标为文字
问题描述:
我被卡住了,无论<a>
标签字体大小是多少,我该如何垂直居中箭头?CSS垂直对齐中心字体真棒图标为文字
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; }
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
到字体真棒图标,垂直对齐的图标。我相信这是你要找的。
答
用途: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>
使用垂直对齐:中间;为我的标签 –