html - 将 Font Awesome 图标与 a 标签中的文本垂直对齐

Question

垂直对齐 FontAwesome 图标以与 a, <a href> 中的文本垂直对齐的最佳方式是什么？标签？

这是我目前拥有的 HTML 和 CSS。

谢谢。

.btn-tertiary{
	display: block;
	width: 100%;
	padding: 10px 7px 10px 10px;
	border: 2px #E0DDDD solid;
	margin-bottom: 10px;
	font-size: 15px;
	color: #0D0155;
	height: auto;
	font-weight: 600;
	letter-spacing: 1px;
	-webkit-transition:all 300ms ease-in-out;
    transition: color 0.3s ease 0s;
}
.btn-tertiary:hover{
	background-color: #004;
	color: white;
	text-decoration: none;
	border: solid 2px #004;
}
.btn-tertiary i{
	color: #E0DDDD!important;
	float: right!important;
	font-size:20px;
	height: 20px;
	vertical-align: middle;

}

<a class="btn-tertiary" title="Login to mange your investmnts & more" href="#">Login to my account<i class="fa fa-chevron-circle-right" aria-hidden="true"></i></a>

Answer 1

为您的 i 元素使用填充。或者使元素位置相对，我定位绝对。然后使用顶部或底部。