php - 我怎样才能得到头像旁边的两个文本？

Question

在我的 wp 主题的评论部分，我使用了 gravatar 和正常的作者/日期。

这是当前情况的截图:

作者和日期都应该在头像旁边垂直居中。我该如何解决这个问题？

这是我的输出:

commentlist {
  padding: 0;
  margin: 0;
  margin-left: 0px;
}
.comment {
  margin-left: 0px;
}
.fn,
.says,
.comment-awaiting-moderation {
  font-size: 1em;
  font-family: sans-serif, Arial;
  color: #2A2A2A;
  font-style: normal;
}
#cancel-comment-reply-link {
  font-size: 0.9em;
  font-family: sans-serif, Arial;
  color: #828282;
  text-decoration: none;
  -o-transition: .3s;
  -ms-transition: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  transition: .3s;
  margin-left: 20px;
}
#cancel-comment-reply-link:hover {
  color: #2A2A2A;
}
.vcard {
  height: 74px;
}
.fn {
  margin-left: 10px;
}
.comment-author {
  margin-bottom: 0.4em;
}
.commentmetadata {
  margin-bottom: 1.6em;
}

<li class="comment byuser comment-author-nadine bypostauthor even thread-odd thread-alt depth-1" id="comment-3">
  <div id="div-comment-3" class="comment-body">
    <div class="comment-author vcard">
      <img alt='' src='http://0.gravatar.com/avatar/3facb3506c6c3f0d12efbf2f6d97a8e1?s=74&#038;d=mm&#038;r=g' srcset='http://0.gravatar.com/avatar/3facb3506c6c3f0d12efbf2f6d97a8e1?s=148&amp;d=mm&amp;r=g 2x' class='avatar avatar-74 photo' height='74' width='74'
      />	<cite class="fn">Nadine Wiedmann</cite><span class="says"> | </span>	
    </div>

    <div class="comment-meta commentmetadata"><a href="http://backpackfamily.de/2016/05/beitrag-4/#comment-3">
			22. Mai 2016 um 8:31</a>	
    </div>

    <p>Hallo2</p>

    <div class="reply"><a rel='nofollow' class='comment-reply-link' href='http://backpackfamily.de/2016/05/beitrag-4/?replytocom=3#respond' onclick='return addComment.moveForm( "div-comment-3", "3", "respond", "33" )' aria-label='Antworte auf Nadine Wiedmann'>Antworten</a>
    </div>
  </div>
</li>
<!-- #comment-## -->

Answer 1

这是在父元素中使用 display: table 和 display: table-cell; 的一种方法； vertical-align: middle; 在子项中。

在这种情况下，您的 vcard 是父元素，.fn 和 .commentmetadata 是子元素。

.commentlist {
  padding: 0;
  margin: 0;
  margin-left: 0;
}
.comment {
  margin-left: 0;
  list-style: none;
}
.fn,
.says,
.comment-awaiting-moderation {
  font-size: 1em;
  font-family: sans-serif, Arial;
  color: #2A2A2A;
  font-style: normal;
}
#cancel-comment-reply-link {
  font-size: 0.9em;
  font-family: sans-serif, Arial;
  color: #828282;
  text-decoration: none;
  -o-transition: .3s;
  -ms-transition: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  transition: .3s;
  margin-left: 20px;
}
#cancel-comment-reply-link:hover {
  color: #2A2A2A;
}
.vcard {
  height: 74px;
  display: table;
}
.fn {
  padding-left: 10px;
  display: table-cell;
  vertical-align: middle;
}
.comment-author {
  margin-bottom: 0.4em;
}
.commentmetadata {
  margin-bottom: 1.6em;
  display: table-cell;
  vertical-align: middle;
}
.says {
  display: table-cell;
  vertical-align: middle;
}

<li class="comment byuser comment-author-nadine bypostauthor even thread-odd thread-alt depth-1" id="comment-3">
  <div id="div-comment-3" class="comment-body">
    <div class="comment-author vcard">
      <img alt='' src='http://0.gravatar.com/avatar/3facb3506c6c3f0d12efbf2f6d97a8e1?s=74&#038;d=mm&#038;r=g' class='avatar avatar-74 photo' height='74' width='74' /> <cite class="fn">Nadine Wiedmann</cite><span class="says"> | </span>
      <div class="comment-meta commentmetadata"><a href="http://backpackfamily.de/2016/05/beitrag-4/#comment-3">
			22. Mai 2016 um 8:31</a>
      </div>
    </div>



    <p>Hallo2</p>

    <div class="reply"><a rel='nofollow' class='comment-reply-link' href='http://backpackfamily.de/2016/05/beitrag-4/?replytocom=3#respond' onclick='return addComment.moveForm( "div-comment-3", "3", "respond", "33" )' aria-label='Antworte auf Nadine Wiedmann'>Antworten</a>
    </div>
  </div>
</li>
<!-- #comment-## -->