FontAwesome 아이콘을 a 태그의 텍스트와 수직으로 정렬

<a href> 태그의 텍스트와 수직으로 정렬하도록 FontAwesome 아이콘을 수직으로 정렬하는 가장 좋은 방법은 무엇입니까?FontAwesome 아이콘을 a 태그의 텍스트와 수직으로 정렬

여기에 내가 지금까지 가지고있는 CSS와 함께 HTML이 있습니다.

감사합니다.

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

당신의 전 요소에 대한

출처

2017-02-04 Anonymous

사용 가스켓. 또는 요소 위치를 상대 위치로 만들고 절대 위치를 지정합니다. 그런 다음 상단 또는 하단을 사용하십시오.

출처

2017-02-04 13:00:50

가장 쉬운 방법은 약간의 추가 마크 업입니다 :

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

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

그런 다음 span 및 i 모두 middle에 vertical-align을 설정합니다 일부 CSS를 추가합니다.

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

당연히 이것은 고의적 인 예이지만이를 기반으로하여 코드를 업데이트 할 수 있어야합니다.

출처

2017-02-04 13:05:31 PlantTheIdea

이 경우 i 요소에 대해 line-height을 조정하면됩니다.

line-height: 17px;

*{box-sizing: border-box;} 
 

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

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

출처

2017-02-04 13:26:44

FontAwesome 아이콘을 a 태그의 텍스트와 수직으로 정렬

답변

관련 문제