3

MDN says line-height work on inline elements. Images are inline elements. Then why doesn't line-height work on img elements? Here is the jsfiddle in which line-height doesn't center the image.

user31782
  • 7,087
  • 14
  • 68
  • 143
  • 1
    First: line-heigth is not for centering purposes. Second: the line-height doesn't works as you expect, inline elements have a different behaviour with the line size. Try with a with line-height, padding and border, next to another span without line-height, padding but with border. – Marcos Pérez Gude May 11 '16 at 10:15

2 Answers2

7

The page you link to says:

On replaced inline elements such as buttons or other input elements, line-height has no effect.

img elements are replaced inline elements, so line-height has no effect on them.

You need an extra element if you want to set the line height of a line box around an image.

span {
  line-height: 200px;
}
div {
  outline: solid black 1px;
}
<div>
  Hello <span> <img src="http://www.iana.org/_img/2013.1/iana-logo-header.svg" alt=""> </span> World
</div>

<div>
  Hello
  <img src="http://www.iana.org/_img/2013.1/iana-logo-header.svg" alt="">World
</div>
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
2

You need to use line-height on div

.container {
  width: 400px;
  height: 400px;
  border: 1px dotted black;
  line-height: 400px;
}
<div class="container">
  <img src="http://findicons.com/files/icons/2229/social_media_mini/48/google.png" alt="">
</div>
Nenad Vracar
  • 118,580
  • 15
  • 151
  • 176
  • 1
    If I had a `span` instead of an image then I wouldn't need to use `line-height` on `div` -- https://jsfiddle.net/0km3dun6/1/ why? – user31782 May 11 '16 at 10:16
  • I think because `span` element can contain text or other elements but `img` element can't. – Nenad Vracar May 11 '16 at 10:20