display =“table-cell”用于垂直对齐不起作用

时间：2016-05-24 17:33:49

标签： html css wordpress wordpress-theming css-position

我尝试使用display="table-cell"和vertical-align="middle"在wordpress中的comments.php中显示头像旁边的日期，名称和编辑链接。

这就是我正在使用的代码：

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

.comment-meta, comment-edit-link { display: table-cell; vertical-align: middle;}
<ol class="comment-list">
					<li class="comment byuser comment-author-nadine bypostauthor even thread-even depth-1 parent" id="comment-2">
				<div id="div-comment-2" 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</cite><span class="says"></span>		</div>
		
		<div class="comment-meta commentmetadata"><a href="http://backpackfamily.de/2016/05/beitrag-4/#comment-2">
			21. Mai 2016 um 19:50</a>&nbsp;&nbsp;<a class="comment-edit-link" href="http://backpackfamily.de/wp-admin/comment.php?action=editcomment&#038;c=2">(Bearbeiten)</a>		</div>

		<p>Hallo123</p>

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

如何获取名称旁边的日期和编辑（德语中的“bearbeiten”）链接，使其如下所示：

命名日期编辑

谢谢！

3 个答案:

答案 0 :(得分：1)

这是你要找的东西（https://jsfiddle.net/qqojuuow/1/）？

<ol class="comment-list">
  <li class="comment byuser comment-author-nadine bypostauthor even thread-even depth-1 parent" id="comment-2">
  <div id="div-comment-2" 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' />         
      <div id="outer">
        <cite class="fn">nadine</cite><span class="says"></span>
        <div class="comment-meta commentmetadata"><a href="http://backpackfamily.de/2016/05/beitrag-4/#comment-2">21. Mai 2016 um 19:50</a>&nbsp;&nbsp;<a class="comment-edit-link" href="http://backpackfamily.de/wp-admin/comment.php?action=editcomment&#038;c=2">(Bearbeiten)</a>       </div>
      </div>
      <p>Hallo123</p>
      <div class="reply"><a rel='nofollow' class='comment-reply-link' href='http://backpackfamily.de/2016/05/beitrag-4/?replytocom=2#respond' onclick='return addComment.moveForm( "div-comment-2", "2", "respond", "33" )' aria-label='Antworte auf nadine'>Antworten</a></div>
    </div>
  </div>
</li>

和css：

.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;
}
#outer {
  height: 74px;
  background-color: black;
  display: block;
  float: left;
  padding-left: 10px;
  line-height: 74px;
}
.avatar {
  float: left;
}
p {
  display: block;
}
.comment-author {
  margin-bottom: 0.4em;
}
.commentmetadata {
  margin-bottom: 1.6em;
  display: inline;

}
.reply

摆脱#outer（https://jsfiddle.net/qqojuuow/3/）：

.vcard {
  height: 74px;
  display: table;
  line-height: 74px;
}
.fn {
  margin-left: 10px;
}

答案 1 :(得分：1)

为什么所有这些都与display: table-cell混乱？您可以使用display: inline-block和vertical-align: middle来实现您的目标。

Check this fiddle

答案 2 :(得分：1)

这里没有更改HTML。我删除了所有的“display：table-cell”，并将其替换为底部的一个“display：inline-block”。如果您有任何问题，请与我们联系。

CSS 

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

}
.fn {
  padding-left: 10px;

  vertical-align: middle;
}
.comment-author {
  margin-bottom: 0.4em;
}
.commentmetadata {
  margin-bottom: 1.6em;


}

img, .inline{


display: inline-block;
vertical-align: middle;
}

HTML 

<ol class="comment-list">

        <div id="div-comment-2" class="comment-body">
            <div class="inline">
                <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</cite><span class="says"></span> </div>

            <div class="inline"><a href="http://backpackfamily.de/2016/05/beitrag-4/#comment-2">
            21. Mai 2016 um 19:50</a>&nbsp;&nbsp;<a class="comment-edit-link" href="http://backpackfamily.de/wp-admin/comment.php?action=editcomment&#038;c=2">(Bearbeiten)</a>
    </div>

            <p>Hallo123</p>

            <div class="reply"><a rel='nofollow' class='comment-reply-link' href='http://backpackfamily.de/2016/05/beitrag-4/?replytocom=2#respond' onclick='return addComment.moveForm( "div-comment-2", "2", "respond", "33" )' aria-label='Antworte auf nadine'>Antworten</a></div>
        </div>
相关问题
最新问题