Button with a glyphicon in the middle and number on the top left corner

Question

I'm trying to do a button like the number pad key but with a number in the left corner. It supose to have a glyphicon in the center, a text bellow that and a small number on the left top corner. I can't put the number in the top left corner he always stand on the left of the glyphicon.

 .btn-default{ height: 8vh; font-size: 12px; text-align: center; } .txt{ font-size: 8px; color:blue; right:0; top:0; } 

  <button type="button" id="buttonPlay" class="btn btn-default btn-lg text-center" ng-click="vid.playVideo()"> <span class="txt" > 8 </span> <span class="glyphicon glyphicon-play"></span><br>Play <!-- <span class="tooltiptext">Play</span>--> </button> 

I already try margin and right: 0 and top:0 but nothing seems to work, any help!?

Answer 1

The element will work with positions . Giving position:relative to button and position:absolute to the txt wil do the trick.

Here is the working code of what you need:

 .btn-default{ font-size: 12px; text-align: center; position:relative; } .txt{ font-size: 12px; color:blue; left:10px; top:0; position:absolute; color:red; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button type="button" id="buttonPlay" class="btn btn-default btn-lg text-center" ng-click="vid.playVideo()"> <span class="txt" > 8 </span> <span class="glyphicon glyphicon-play"></span><br>Play <!-- <span class="tooltiptext">Play</span>--> </button> 

Answer 2

只需使用从左到左浮动项目，从右到右浮动项目，并在按钮上使用填充以将对齐方式应用于按钮的元素。

Answer 3

You need to provide position to button and span element like this :

  button { position:relative; } button span { display: block; position: absolute; top:0; left:0; } 

  <button type="button" id="buttonPlay" class="btn btn-default btn-lg text-center" ng-click="vid.playVideo()"> <span class="txt" > 8 </span> <span class="glyphicon glyphicon-play"></span><br>Play <!-- <span class="tooltiptext">Play</span>--> </button> 

Answer 4

您需要指定按钮的 position:relative和跨度的 position:absolute