Skip to content Skip to sidebar Skip to footer
Home / Css / Html

How To Position Text Inside A Button?

Post a Comment
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

Solution 1:

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.


Solution 2:

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>

Solution 3:

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>

Post a Comment for "How To Position Text Inside A Button?"