Problem when vertically aligning an image inside a figure

Question

Problem when vertically aligning an image inside a figure

Navigation

#1 by (1 votes)
#2 by (1 votes)

2

I have a problem with this simple html:

div {
  height: 150px;
  background: orange;
  line-height: 150px;
}

a {
  display: inline-block;
  vertical-align: middle;
}

figure {
  width: 40px;
  height: 40px;
  background: red;
  margin: 0;
}

img {
  width: 100%;
  height: 100%;
}

<div>
  <a href="#">
    <figure>
      <img src="http://images.freeimages.com/images/previews/8d4/anemone-1372191.jpg" alt="">
    </figure>
  </a>

  <a href="#">Texto del enlace</a>
</div>

I do not understand that the image (img) does not appear centered inside its container (the figure with a red background) which is correctly centered

If we change the position of the image to absolute then it works fine:

div {
  height: 150px;
  background: orange;
  line-height: 150px;
}

a {
  display: inline-block;
  vertical-align: middle;
}

figure {
  width: 40px;
  height: 40px;
  background: red;
  margin: 0;
  position: relative; /* añadiendo esto */
}

img {
  width: 100%;
  height: 100%;
  position: absolute; /* ...y esto */
}

<div>
  <a href="#">
    <figure>
      <img src="http://images.freeimages.com/images/previews/8d4/anemone-1372191.jpg" alt="">
    </figure>
  </a>

  <a href="#">Texto del enlace</a>
</div>

Why is it off center in the first version?

html5 css3

asked by Oscar Galo 30.01.2017 в 12:23

source

2 answers

1

You can solve it by adding img to display: block; .

Demo:

div {
  height: 150px;
  background: orange;
  line-height: 150px;
}

a {
  display: inline-block;
  vertical-align: middle;
}

figure {
  width: 40px;
  height: 40px;
  background: red;
  margin: 0;
}

img {
  width: 100%;
  height: 100%;
  display: block;
}

<div>
  <a href="#">
    <figure>
      <img src="http://images.freeimages.com/images/previews/8d4/anemone-1372191.jpg" alt="">
    </figure>
  </a>

  <a href="#">Texto del enlace</a>
</div>

answered by 30.01.2017 в 13:04

Problem in Symfony 3 with ManyToMany Bidirectional relationship Obtain user folder for any user in Linux (Ubuntu)

score 1 · Accepted Answer

Not only does display: block serve you as @MarcosGallardo says, but also:

flex
table
table-cell
table-column
table-header-group
table-footer-group
table-row
And many more

Here the important thing is to know why this happens and the answer is not from another world. The problem here is line-height since is being inherited in the figure element, causing the image to get out of frame. The reason why changing img to block eliminates this problem is because this property affects only online or mixed elements ( inline and inline-block ). That is why if you do not change the display to img it will have its default value, which is inline-block .

You can solve your problem just by overwriting the inherited value for line-height :

figure {
  line-height: initial;
}

div {
  height: 150px;
  background: orange;
  line-height: 150px;
}

a {
  display: inline-block;
  vertical-align: middle;
}

figure {
  width: 40px;
  height: 40px;
  background: red;
  line-height: initial;
  margin: 0;
}

img {
  width: 100%;
  height: 100%;
}

<div>
  <a href="#">
    <figure>
      <img src="http://images.freeimages.com/images/previews/8d4/anemone-1372191.jpg" alt="">
    </figure>
  </a>

  <a href="#">Texto del enlace</a>
</div>