Html Verticall将两个不同大小的标题对齐

我只想沿着垂直轴对齐H1和H2。我想要的中心，文本顶部和文本底部的选项不确定哪一个我想去还没有

我尝试了以下开始：

HTML

查看JSFIDLE：

谢谢

使用“显示：内联块”而不是“浮动”，并使用“垂直对齐：任意”

<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>

h1 {
    float:left;    

}
h2
{
    float:left;
}

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

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