保持浮动跨度居中

Question

我已经尝试了很多来保持一个 span valign middle。目前它看起来像：

但我想要那个：

在这里你可以玩：Link

Answer 1

.wrapper{
  display:table-row;
}

.image-left{
  width:50px;
  height:50px;
  background-color:grey;
  }

.text-block{
  display:table-cell;
  vertical-align:middle;
}

<div class="wrapper">
  <div class="image-left">
  </div>
  <div class="text-block">
    <span>One does not simply css.</span>
  </div>
</div>

每当我需要对齐文本时，我倾向于在 span 的父元素或文本所在的 div 上使用 display: table-cell 和 vertical-align:middle。

但是实际上有很多方法可以实现这一点。我建议你 google 一点，看看哪一个最适合你的情况。我只是更喜欢 table-cells，因为它们会自动调整到行中的所有内容，而且看起来很干净。

详细信息：http://phrogz.net/css/vertical-align/

顺便说一句，你的 link 没用。

保持浮动跨度居中

Keeping floating span valign middle

valign

twitter-bootstrap-3