无论如何使用CSS将中心文本从所有位置对齐而不是默认自上而下？

Question

查看我的代码。

http://jsfiddle.net/Q8V4H/6/

p元素电话拨号器中的文本正在使用自上而下的方法对齐，而我想在所有位置i，e右上角和左下方对齐它。这是我的代码生成的示例输出。

我不想在那里有任何空间而是文本Download PC Dialer应该在div的中心对齐，即从左，右，顶部，底部而不是左右两侧。

这是我想要实现的示例图像。

如果我使用text-align:center，它只会将文本从左侧和右侧对齐，而不是从顶部和底部对齐，在这种情况下，我也希望从顶部和底部对齐它。我该怎么做？

谢谢

Answer 1

<div style="display:table">
  <div style="display:table-row">
    <div style="display:table-cell;text-align:center;vertical-align:middle;padding:8px">
      Download PC Dialer
    </div>
  </div>
  <div style="display:table-row">
    <div style="display:table-cell;text-align:center">
      <a href="/download"><img src="download.png"></a>
    </div>
  </div>
</div>

这将为您提供与使用没有实际使用表的语义问题的表相同的行为。适用于IE7及以下版本的所有浏览器。

Answer 2

将其放入<div>，然后将其放入另一个<div>。子div应该有vertical-align: middle和line-height: Xpx，其中X是内部div的高度。

请看这里：http://phrogz.net/css/vertical-align/index.html

Answer 3

对于水平对齐，您可以使用margin：0 auto;在固定的div元素上。对于垂直对齐，您可以将line-height设置为与font-size相同。