css - 如何将另一个div中的div与文本垂直对齐？

Question

我正在尝试将一个 div 在父 div 中垂直居中，其中存在文本。这是我得到的:

它看起来有点滑稽，因为文本似乎正确居中，但黄色框却不是。我就是这样做的:

.btn {
      background-color: #ccc;
      color: #000;
      width: 200px;
      border: solid 1px black;
      text-align: center;
      vertical-align: middle;
      display: table-cell;
}
.square {
      background-color: #ff0;
      width: 20px;
      height: 20px;
      display: inline-block;
}
.inner {
      display: inline-block;
}

<div class="btn">
  <div class="square"></div>
  <div class="inner">Hello</div>
  <div class="square"></div>
</div>

我对“table-cell”+ vertical-align 的使用是否有效？我只关心 html5，我真的只是针对最新版本的移动 safari，所以不必担心旧浏览器等。

这是一个 js fiddle :

http://jsfiddle.net/TrJqF/

谢谢

Answer 1

在正方形类上设置vertical-align:top。额外的空间来自为落在该行下方的后代文本元素(如 j、g、y 等)保留的空间。

jsFiddle example