垂直对齐中间不起作用答案

【问题标题】：vertical align middle not working垂直对齐中间不起作用
【发布时间】：2016-07-01 12:09:31
【问题描述】：

我希望图片前面的文字在中间！

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

怎么了？

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

【问题讨论】：

图像链接在 jfiddle 中对我不起作用，但我会采用任何包含图像的内容并将其作为 display:inline-block; position:relative; 并将您想要在图像前面的文本作为 position:absolute;看看这对你有什么作用。
补充一点，vertical-align 仅适用于 inline 和 table-cell 元素，并且默认情况下 div 不是 inline （默认情况下它是块元素）。因此，如果我的建议在一个相对位置和另一个绝对位置方面不完全有效，请添加 display:inline-block;垂直对齐必须做任何事情。
这已经被问及回答过：*.com/q/4753678/407456
更新小提琴：jsfiddle.net/a0bhv4n1/14

标签： css

【解决方案1】：

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

【讨论】：