画像の横にあるテキスト：解像度を変更して画像を中央に配置するにはテキストを取得

Question

画像の右側にテキストがあります。デスクトップビューではすばらしいですが、モバイルビューになると、テキストが画像の上に向かって上がり始めます。解像度を変えながら、このテキストをイメージと真ん中の位置に置いておきたいです。たとえば、http://twoguysplayingzelda.com/news/if-link-was-evil-could-he-destroy-hyrule/を参照してください。ご協力いただきありがとうございます！

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; 
} 

Answer 1

あなたはフレキシボックスを使用することができます。

.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>

の