1

I have the below code which is supposed to display an icon vertically aligned in the middle of the line of text its in. For some reason when I vertically align it in the middle it is slightly off center still (the icon is closer to the bottom and not exactly in the middle), what might be causing this and how can I get it directly in the middle?

.text-heading {
  padding: 30px 20px 10px;
  font-size:50px;
}

button {
  background:none;
  border:none;
  vertical-align:middle;

}

button img {
  height:10px;
}
<h2 class="text-heading"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat </span><button class="text-more-info" type="button"><img alt="info" src="https://freeiconshop.com/wp-content/uploads/edd/info-circle-outline.png"></button></h2>
rgc998
  • 299
  • 2
  • 15

1 Answers1

2

This happens because the apparent height of the letters does not match the line height as calculated by the css algorithm. Using your browser's inspect tool, you can see the box that bounds the line height, and verify that the icon is indeed in the center: enter image description here

The apparent difference has to do with how the browser treats the font. In particular, in this case and using this font, it seems that there is more head space above the font, though the icon does look centered with respect to the font's x-height. Using native css, that's the best you can do in a font-agnostic way. If you know what font you're using, you may be able to manually add some padding to the top or bottom to fix the visual issue.

If you want a more flexible solution, I suggest you look into capsize.

nvioli
  • 4,137
  • 3
  • 22
  • 38