CODEWITHSUNDEEP
htmlcss
user31782
user31782

Reputation: 7587

Why doesn't line-height work on img elements?

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.

Upvotes: 3

Views: 2097

Answers (2)

Quentin
Quentin

Reputation: 944530

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>

Upvotes: 7

Nenad Vracar
Nenad Vracar

Reputation: 122145

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>

Upvotes: 2

Related Questions