如何在 HTML 中垂直对齐元素答案

【问题标题】：How to Vertically Align Elements in HTML如何在 HTML 中垂直对齐元素
【发布时间】：2014-01-08 15:35:10
【问题描述】：

我有一个按钮，旁边有一些文字，像这样，

----------------
|              |
|    Button    |     Text
|              |
----------------

我想让文本垂直对齐到按钮的中心。我应该如何在 CSS 中做到这一点？

这是我的尝试：

我发现这种方法有两个问题：

【问题讨论】：

【解决方案1】：

要使文本垂直居中，请将 line-height 设置为与 height 相同，例如：

#form-actions{ height: 30px; }
#text{ line-height: 30px; }

并将vertical-align设置为middle：

#text{ line-height: 30px; vertical-align:middle; }

【讨论】：

CSS 中没有 vertical-alignment 属性。你的意思是vertical-align？另外，请注意vertical-align 对display: block 的元素没有影响，仅对内联流动的元素（display: inline 或inline-block 以及一些很少使用的其他元素）和表格单元格（其行为与内联完全不同）元素）。

【解决方案2】：

只要您尝试垂直对齐的元素及其所有同级元素都是inline 或inline-block，只需使用vertical-align: middle。

【讨论】：