ボタンをデザインしようとしています。私は、このアンカーを持っている:アイコン付きボタンをデザインする際のトラブルシューティング
<li><a href="#"><i class="glyphicon glyphicon-tree-conifer"></i> sites</a></li>
ここにそれがどのように見えるか:
を私はツリーの下のサイトの単語を作るために上記の外観を変更する必要があります。
ボタンをデザインしようとしています。私は、このアンカーを持っている:アイコン付きボタンをデザインする際のトラブルシューティング
<li><a href="#"><i class="glyphicon glyphicon-tree-conifer"></i> sites</a></li>
ここにそれがどのように見えるか:
を私はツリーの下のサイトの単語を作るために上記の外観を変更する必要があります。
ただ、アイコンとテキストの間<br>
タグを配置します。ここでは望ましい結果です。そして、<a>
タグにコンテンツの内容を集中させます。このような何か作業をする必要があります:
<li><a href="#" style="display: inline-block;text-align: center;"><i class="glyphicon glyphicon-tree-conifer"></i> <br> sites</a></li>
<br>
を挿入することは容易な修正がありますが、それは最高のものではありません。
タグ内に新しいクラスを追加して、その中にアイコンを設定してブロックとして表示することをお勧めします。リンク全体を中央揃えのテキストとして表示するように設定できます。
また、<i>
タグを<span>
に置き換えると、その要素をブロックまたはインラインとして最もよく記述することができます。
<a href="#" class="yourClass">
<span class="glyphicon glyphicon-tree-conifer"></span>sites
</a>
.yourClass {
display:inline-block;
text-align:center;
}
.yourClass .glyphicon {
display:block;
}