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

垂直对齐适用于内联元素。您正在将它应用于类.comment-text，这是一个div元素。 div是一个块样式元素，当然这意味着它将占据允许的整个空间，因此你无法将占据整个空间的内容集中在一起。内联元素仅根据其中的内容占用所需空间，您只需将display:inline-block添加到.comment-text即可使vertical-align:middle生效。有关详细信息，请访问MDN's article on vertical-align

垂直对齐中间不工作

1 个答案: