垂直对齐FontAwesome图标以与<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>

最佳答案

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

关于html - 在A-tag中将 Font Awesome 图标与文本垂直对齐,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42040668/

10-11 05:45
查看更多