按钮样式为glyphicon，里面有文字？

Question

我是新来的，我对一个最轻松，最简单的问题有点挣扎。

我想使用glyphicon-arrow-right作为按钮，文本“to test”在其中居中，是否有一种简单的方法可以做到这一点？我有这个代码行atm：

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

有了这个，我得到一个指向右边的绿色箭头，文字位于其下方。那我怎么设法把它放在箭头内？

谢谢！

Answer 1

您可以将按钮设置为使用position:relative，这会导致其中的所有元素相对于它定位，只需在包含文字的实际position:absolute上使用<span>并调整top和left属性以使其处于正确的位置：

<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和下面显示的输出：