如何垂直对齐元素HTML

我有一个按钮和一些文字旁边，这样，如何垂直对齐元素HTML

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

我想有垂直排列的按钮的中央的文字。我应该如何在CSS中做到这一点？

这里是我的尝试：

http://jsbin.com/oduma4/4

我发现两个问题的方法：

的文本在IE中显示在顶部6
两个要素流动超出父div，所以这个布局会干扰其他div。

来源

2010-12-10 ZZ Coder

要居中文本垂直设置行高到相同高度，例如：

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

并设置垂直对齐到中间：

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

来源

2010-12-10 23:00:20 JCOC611

CSS中没有'vertical-alignment'属性。你的意思是“垂直对齐”吗？另外，请注意'vertical-align'对'display：block'元素没有影响，只对内联的元素（'display：inline或'inline-block'和一些很少使用的元素）和table单元格（其行为与内联元素的行为完全不同）。 – eyelidlessness 2011-02-10 03:11:16

只要你尝试verti的元素cally对齐，其所有兄弟姐妹都是inline或inline-block，只需使用vertical-align: middle即可。

Preview：http://jsfiddle.net/Wexcode/KceFF/

来源

2011-12-30 06:17:42 Wex

如何垂直对齐元素HTML

回答

相关问题