css - 垂直对齐中间不起作用

Question

我希望图片前面的文字位于图片中间!

我的问题是垂直居中对齐不起作用...

怎么了？

<div class="comments">
<div class="pull-left lh-fix">
<img class=foto src="/$foto" class="imgborder">
</div>

<div class="comment-text pull-left">
<span class="pull-left color strong"><a href="/anna">anna</a>:</span> dododod
</div>
</div>

.pull-left { float: left; }
.lh-fix { line-height: 0 !important; }

.comments {
  position:relative;
  display:block;
  overflow:auto;
  padding-left:15px;
  padding-top:8px;
  padding-bottom:8px;
  border:1px solid #000;
}


.comment-text {
  margin-left: 8px;
  color: #333;
  vertical-align:middle; //not working?
  line-height:normal;
  width: 85%;
  text-align:left;
}

.foto{
  width:50px;
  height:50px;
  float:left;
}

https://jsfiddle.net/a0bhv4n1/

Answer 1

垂直对齐适用于行内元素。您将它应用于 div 元素的 .comment-text 类。 div 是 block 样式元素，这当然意味着它会占据它允许的整个空间，因此您不能将已经占据整个空间的东西居中。内联元素仅根据其中的内容占用它们需要的空间，您可以简单地将 display:inline-block 添加到 .comment-text 以允许 vertical-align:middle 工作。更多信息请访问 MDN's article on vertical-align