在我的wp主题的评论部分,我使用了一个gravatar和普通的作者/日期。
这是当前情况的屏幕截图:
作者和日期应该垂直居中于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&d=mm&r=g' srcset='http://0.gravatar.com/avatar/3facb3506c6c3f0d12efbf2f6d97a8e1?s=148&d=mm&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-## -->
&#13;
答案 0 :(得分: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&d=mm&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-## -->