垂直对齐两个不同大小的标题

Question

我只是想沿垂直轴对齐H1和H2。我想要中心，文本顶部和文本底部的选项（不确定我想要使用哪一个）。

我尝试了以下开始：

HTML

<div>Able was I...</div>
<h1>A man a plan</h1><h2>a canal...Panama!</h2>
<div style="clear:both">ere I saw Elba</div>

CSS

h1 {
    float:left;    

}
h2
{
    float:left;
}

查看jsfiddle：http://jsfiddle.net/yzsrkt49/1/

谢谢！

Answer 1

使用display: inline-block代替浮点数并使用vertical-align: whatever-you-want

h1 {
  display: inline-block;
  vertical-align: middle;    
}

h2{
  display: inline-block;
  vertical-align: middle;    
}

FIDDLE