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><spanid="container"><imgsrc="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.

buttonspan {
  margin-left: 10px;
}
<linkhref="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"rel="stylesheet"/><buttonclass="button button-block"><iclass="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-blocki {
  margin-right: 15px;
}
<htmlng-app="ionicApp"><head><metacharset="utf-8"><metaname="viewport"content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"><title>Ionic Pull to Refresh</title><linkhref="//code.ionicframework.com/nightly/css/ionic.css"rel="stylesheet"><scriptsrc="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script></head><bodyng-controller="MyCtrl"><ion-content><divclass="tabs"style="height:auto;"><divclass="row"><divclass="col"style="padding: 0"><buttonclass="button button-block button-positive"><iclass="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?"