css - 将评论文本放在中间图像前面

Question

我有一个包含一些文本的 div comment-text。此文本可以是任意大小。

我想要的是在图像中间对齐文本，它现在总是在最上面，我想要它在中间。

有什么想法吗？

html:

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

CSS:

.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;
  line-height:middle; //not working?
  width: 85%;
  text-align:left;
}

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

https://jsfiddle.net/jau7Lfqw/

Answer 1

设置line-height:50px;为.comment-text

编辑:(作者评论后):

也可以使用 Flexbox 垂直居中。

.comments {
  display: flex;
  justify-content: flex-start;
  align-items:center;
  padding-left:15px;
  padding-top:8px;
  padding-bottom:8px;
  border:1px solid #000;
}


.comment-text {
  margin-left: 10px;
  color: #333;
  text-align:left;
}

.foto{
  width:50px;
  height:50px;

}

<div class="comments">
<img class=foto src="/$foto" class="imgborder">

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