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小提琴：

http://jsfiddle.net/TrJqF/

谢谢

Answer 1

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

jsFiddle 示例

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 像素，这将显示您的期望。