user1354934 user1354934 - 2 months ago 11
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>
</button>

Answer

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.

Comments