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

您可以使用flexbox。

将align-items: center添加到容器中......

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

图像旁边的文本：使文本保持在图像的中间对齐，并改变分辨率

1 个答案: