2017-02-04 23 views
0

FontAwesomeのアイコンを垂直に整列させて、<a href>タグのテキストと垂直に整列させる最適な方法は何ですか?FontAwesomeのアイコンをaタグのテキストと垂直に整列する

これまでのCSSに加えて、HTMLがあります。

ありがとうございました。あなたのI要素の

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

答えて

1

使用パディング。または、相対的な要素位置を作成し、iは絶対位置を指定します。そして、上または下を使用してください。

0

最も簡単な方法は、少し余分なマークアップである:

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

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

その後spaniの両方のためにmiddlevertical-alignを設定しますいくつかのCSSを追加します。

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

明らかに、これは意図的な例ですが、それに基づいてコードを更新できるはずです。

0

この場合、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>

関連する問題