ボタンはグリフコンとして書式設定され、テキストは内部にありますか？

Question

私はここに新しいです、そして、私は、最も軽く、単純な問題と少し闘争しています。

グリフコンの右矢印ボタンを使用して、 "テストする"というテキストを中央に配置したい場合は、これを行う簡単な方法はありますか？これにより

<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> 
    <a class="btn btn-default" style="color:green" href="textview" id="totestarrow"> 
     <span style="font-size:10em;" class="glyphicon glyphicon-arrow-right"> 
     </span><br>Til testene 
    </a> 
</div> 

が、私はそれの下中央にテキストで、右向きの緑色の矢印を得る：私はこのコード行のATMを持っています。それで私はそれをどのように矢印の内側に置くことができますか？

ありがとうございます！

Answer 1

あなたはその中のすべての要素がそれに対して配置させて、単にあなたのテキストを含む実際の<span>にposition:absoluteを使用し、それを得るためにtopとleft特性を調整するであろう、position:relativeを使用するようにボタンを設定することができます適切な位置：

<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> 
    <a class="btn btn-default" style="color:green; position: relative;" href="textview" id="totestarrow"> 
     <span style="font-size:10em;" class="glyphicon glyphicon-arrow-right"></span> 
     <span class='centered-text'> 
     Til testene 
    </span> 
    </a> 
</div> 
<style> 
.centered-text { 
    /* This will cause your element to be positioned freely over it's container */ 
    position: absolute; 
    /* This will bring the element roughly halfway down the existing element */ 
    top: 47%; 
    /* Colored white to stand out */ 
    color: white; 
    /* The following styles will center the element in it's container */ 
    text-align: center; 
    left: 0; 
    width: 100%; 
} 
</style> 

あなたがsee an example of this here、出力は以下に示すことができます。