Question

将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>

Answer 1

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

Answer 2

最简单的方法是增加一点额外标记：

<a class="foo">
  <span>The text you want to align</span>

  <i class="fa fa-check"></i>
</a>

然后为vertical-align和middle添加一些将span设置为i的CSS。

.foo span,
.foo i {
  display: inline-block;
  vertical-align: middle;
}

显然这是一个人为的例子，但您应该可以根据它更新代码。

Answer 3

在这种情况下，您所要做的就是为line-height元素调整i。

line-height: 17px;

＆＃13;

*{box-sizing: border-box;}

.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;
    line-height: 17px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<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>

＆＃13;

将FontAwesome图标与带有a-tag

3 个答案: