dwkns dwkns - 5 days ago 6
CSS Question

How do you vertically align a icon in a two line bootstrap button?

How do you vertically align an icon in a two line bootstrap button so it appears like :

enter image description here

<button class="btn btn-lg btn-success" style="text-align:left; width:400px">
Line 1 text<br>Line2 text here <span style="vertical-align:middle;" class="glyphicon glyphicon-earphone pull-right">&nbsp;</span>
</button>


Currently my code produces this :

enter image description here

http://www.bootply.com/jzLeoUKNR3

Answer

As far as I know, this requires a bit more CSS. I forked your Bootply link here: http://www.bootply.com/h24QRPyHbg

I removed the pull-right class from the icon so it's no longer floating, then added this CSS:

  • position: relative; on the btn (to allow the icon to be positioned accordingly)
  • position: absolute; right: 16px; top: 50%; transform: translateY(-50%); on the icon span (to center it vertically on the right)

All together:

<button class="btn btn-lg btn-success" style="text-align: left; width: 400px; position: relative;">
  <span style="position: absolute; right: 16px; top: 50%; transform: translateY(-50%);" class="glyphicon glyphicon-earphone">&nbsp;</span>
  Line 1 text<br>Line2 text here 
</button>
Comments