-1

I have some text to the right of an image. It looks great in desktop view, but as I go down to mobile view, the text will start to creep up towards the top of the image. I would like this text to stay in middle alignment with the image while changing resolutions. Please see http://twoguysplayingzelda.com/news/if-link-was-evil-could-he-destroy-hyrule/ for an example. Thanks for your help!

HTML

<div class="writer-section">
    <a href="http://twoguysplayingzelda.com/wp-%20content/uploads/2017/11/Writer-Hick-1.png">
        <img alt="" class="alignnone size-thumbnail wp-image-5522" height="60" src="http://twoguysplayingzelda.com/wp-content/uploads/2017/11/Writer-Hick-%201-150x150.png" width="60">
    </a>
    <span id="writer">
        By <a href="http://twoguysplayingzelda.com/hick/" target="_blank">Hick</a>
        <br>
        November 29, 2017
    </span>
</div>

CSS

.writer-section {
    overflow: hidden;
    border-bottom: 1px solid #D3D3D3;
}

.writer-section img {
    float: left;
    padding-bottom: 10px;
    padding-right: 10px;
}

#writer {
    line-height: 1px !important;
    font-size: 10pt;
    color: #808080;
}
dommmm
  • 899
  • 8
  • 16
Two Guys Playing Zelda
  • 13
  • 4
  • 1
    Possible duplicate of [How do I vertically center text with CSS?](https://stackoverflow.com/questions/8865458/how-do-i-vertically-center-text-with-css) – Daniel Beck Nov 30 '17 at 16:06

1 Answers1

0

You could use flexbox.

Add align-items: center to the container... 

.writer-section {
  overflow: hidden;
  border-bottom: 1px solid #D3D3D3;
  padding-bottom: 10px;
  display: flex;
  align-items: center;
}

#writer {
  font-size: 10pt;
  color: #808080;
  padding-left: 10px;
}
<div class="writer-section">
  <a href="http://twoguysplayingzelda.com/wp-
content/uploads/2017/11/Writer-Hick-1.png">
    <img src="http://twoguysplayingzelda.com/wp-content/uploads/2017/11/Writer-Hick-
1-150x150.png" alt="" width="60" height="60" class="alignnone size-thumbnail 
wp-image-5522" /></a>
  <span id="writer">By <a 
href="http://twoguysplayingzelda.com/hick/" target="_blank">Hick</a>
<br>November 29, 2017</span>
</div>
sol
  • 22,311
  • 6
  • 42
  • 59