CODEWITHSUNDEEP
htmlcss
Qwertiy
Qwertiy

Reputation: 21380

How to center icon and text inside of a button?

How can I center icon and text inside of the button without specifiing the sizes to align items?

.ico {
  background: url(https://www.gravatar.com/avatar/cbfaff96665b7567defe1b34a883db8b?s=32&d=identicon&r=PG);
  width: 32px;
  height: 32px;
  display: inline-block;
}
<button>
  <span class=ico></span>
  And some text
</button>

Upvotes: 5

Views: 7766

Answers (2)

emattiazzi
emattiazzi

Reputation: 376

You can add vertical-align: middleto the class ico. Fiddle at: https://jsfiddle.net/mnet4hn4/

Upvotes: 11

Qwertiy
Qwertiy

Reputation: 21380

https://jsfiddle.net/nog2kuta/

.ico {
  background: url(//www.gravatar.com/avatar/cbfaff96665b7567defe1b34a883db8b?s=32&d=identicon&r=PG);
  width: 32px;
  height: 32px;
  display: inline-block;
}

button {
  padding: 3px;
}

button span {
  display: inline-block;
  vertical-align: middle;
}
<button>
  <span class=ico></span>
  <span>And some text</span>
</button>

Works fine in Chrome, FF, IE (tested in 11), Opera 12

Upvotes: 4

Related Questions