0

I am trying to put a tag within a button next to the label text. I want the two to line up, but when I do that the text seems to go down, to the bottom of the button instead of in the middle. I tried setting the line height: and also vertical align: middle, but neither seem to work. Does anyone know the fix?

Here is what I tried:

HTML

<button class='btn'>
  <span>Label</span>
  <i class="material-icons right">search</i>
</button>

CSS

.btn {    
  background-color: black;
  color: white;
  text-transform: uppercase;
  padding: 0 15px 0 15px;
  height: 40px;
}

.btn span {
  line-height: 40px;
  vertical-align: middle;
  padding-right: 10px;
}

.btn i {
  line-height: 40px;
}

Here is a fiddle: https://jsfiddle.net/0jy6zh75/9/

rishubk
  • 441
  • 2
  • 8
  • 19
  • for the quick fix : `vertical-align: middle;` should be on the icon not the text – Temani Afif Apr 05 '18 at 21:09
  • @andrralv because we should not stick to the correct answer ;) you should read ALL the answer and consider all the related links ... and the answer is in the duplicate question – Temani Afif Apr 05 '18 at 21:09

0 Answers0