CODEWITHSUNDEEP
htmlcssimagebutton
Azeirah
Azeirah

Reputation: 6338

Vertically center text together with an image in a button

It's pretty simple, I have a button, I want an icon to the left of it. The problem is that the button text is pushed downwards a little, so the icon and the text don't line up neatly. I'm not really sure what causes this, I tried vertical-align and setting the line-height.

http://codepen.io/anon/pen/EKlFb

HTML

<button>
  <img src="http://img.informer.com/icons/png/16/3995/3995186.png"/>OBS
</button>

CSS

button {
  font-weight: bold;
  height: 27px;
  line-height: 27px;
  vertical-align: middle;
}

Upvotes: 1

Views: 91

Answers (2)

nkmol
nkmol

Reputation: 8091

Just float your image to the left and it should be fixed:

HTML:

<button>
  <img src="http://img.informer.com/icons/png/16/3995/3995186.png" alt="" class="icon"/>
  OBS
</button>

CSS:

button {
  font-weight: bold;
  height: 27px;
}

button > .icon
{
  float: left;
}

CodePen

Upvotes: 2

Jatin
Jatin

Reputation: 3089

Working Fiddle

Try following:

<button>
   <img src="http://img.informer.com/icons/png/16/3995/3995186.png" alt="" class="icon"/>
   <span>OBS</span>
</button>

CSS:

button img,
button span {
  vertical-align: middle;
}

Editted:

Fiddle

Upvotes: 2

Related Questions