如何垂直对齐另一个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，我真的只是针对最新版本的手机游戏，所以不必担心旧浏览器等。

这是js的小提琴：

http://jsfiddle.net/TrJqF/

由于

Answer 1

在方形类上设置vertical-align:top。额外的空间来自为j，g，y等后代文本元素保留的空间，它们位于该行之下。

<强> jsFiddle example

Answer 2

实际上两个身高之间没有区别。将黄色背景颜色应用于内部类，并查看显式和无高度的差异。

两个方格div都没有内容，内部div没有内容。 css框根据其内容自行对齐。将空格添加到方形div，如下所示：

  <div class="btn">
   <div class="square">&nbsp;</div>
   <div class="inner">Hello</div>
   <div class="square">&nbsp;</div>
  </div>

如果您需要，可以添加顶部和底部边距1或2像素，这将显示您的期望。