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

修改 :(在作者评论之后）：

还可以将中心与Flexboxes垂直对齐。

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

在中间的图像前面的位置注释文本

1 个答案: