Vertical Alignment of text and Image

by Konstantin Rouda

HTML

<figure class="author">
  <img src="http://sr.photos2.fotosearch.com/bthumb/CSP/CSP572/k5729998.jpg" class="author__image" alt="author image" style="
    vertical-align: middle;
">
  <figcaption class="author__info">
    <span class="author__name">Jefrey Cooper</span>
    <a href="mailto:[email protected]" class="author__email">[email protected]</a>
  </figcaption>
</figure>

CSS

IMAGE {
  max-width: 100%;
}

FIGURE {
  max-width: 50vw;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, .2);
  padding: .3em .5em;
  margin: 5em auto 0;
}

.author__info {
  display: inline-block;
  vertical-align: top;
  font-size: 2em;
  background: rgba(230, 200, 200, .2);
}

.author__info,
.author__image {
  vertical-align: middle; // in order to align next to image (in the middle of it) we should give them both the same middle
}

.author__name,
.author__email {
  display: block;
}