How to position text inside a button?

Question

I am just using float: left on an icon right now because I am struggling with positioning the text in my button such that the icon is in the "middle" (20% of the left) and the text is in the middle (80% of the right).

Like this:

**********************************
*   Icon     Text will be here   *
*                                *
**********************************

Here is how I have the button set up:

<button class="button button-block">
    <i class="ion-plus-round"></i><span>Add to Favorites</span>
</button>

Provide a demo such as a fiddle, try display: inline-block and vertical align: middle without using float — Jinu Kurian, Dec 12 '15 at 01:59
http://codepen.io/anon/pen/gPbQNZ What about something like this? Would this be OK? — user1354934, Dec 12 '15 at 02:04

score 3 · Accepted Answer · edited May 23 '17 at 12:08

Try CSS flexbox:

#container {
  display: flex;
  align-items: center;
}
#container > * {
  margin-right: 5px;
}

<button>
  <span id="container">
      <img src="http://i.imgur.com/60PVLis.png" width="25" height="25" alt="">
      <span>Add to Favorites</span>
  </span>
</button>

I used a span to wrap the content because some browsers don't accept button elements as flex containers.

Browser Support

Flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE 10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.

thanks Michael. This is really cool and I am going to play around with this. I think this is what would be best for me. Thanks — user1354934, Dec 12 '15 at 02:12

score 1 · Answer 2 · answered Dec 12 '15 at 02:24

How about something like this ?

angular.module('ionicApp', ['ionic'])

.controller('MyCtrl', function($scope) {

});

.button-block {
  display: inline-block;
  vertical-align: middle;
}

.button-block i {
  margin-right: 15px;
}

<html ng-app="ionicApp">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

  <title>Ionic Pull to Refresh</title>

  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>

</head>

<body ng-controller="MyCtrl">


  <ion-content>
    
    <div class="tabs" style="height:auto;">
      <div class="row">
        <div class="col" style="padding: 0">
          <button class="button button-block button-positive">
            <i class="ion-plus-round"></i><span>Add to Favorites</span>
          </button>
        </div>
      </div>
    </div>
  </ion-content>

</body>

</html>

score 0 · Answer 3 · answered Dec 12 '15 at 02:12

Here is an example using Font Awesome.

Add a left margin to the span to control the spacing between the two inline elements (i and span).

If you specify a width for the button, then you can set widths to the two child elements as needed.

button span {
  margin-left: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>

<button class="button button-block">
    <i class="fa fa-plus-circle"></i><span>Add to Favorites</span>
</button>

score 0 · Answer 4 · answered Oct 01 '22 at 14:34

0

.btn-cont {Margin-left: 12px;}

<button><span class="btn-cont">Hello World</span><button>

answered Oct 01 '22 at 14:34

user20137984

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 05 '22 at 21:51

How to position text inside a button?

4 Answers4

Linked