user1354934 user1354934 - 1 month ago 4x
CSS Question

How to position text inside a button?

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>


Try CSS flexbox:

#container {
  display: flex;
  align-items: center;
#container > * {
  margin-right: 5px;
  <span id="container">
      <img src="" width="25" height="25" alt="">
      <span>Add to Favorites</span>

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.