如何垂直对齐运行多行的文本

Question

我意识到可能有一些问题与这个类似的标题,但我认为我的问题有点不同,我试图做一些背景阅读,似乎无法在任何地方找到一个优雅的解决方案(虽然那可能是因为一个不存在)

基本上,我有三个盒子,每个盒子左边有一个图像,里面有一些文字,问题是让文本垂直对齐,做了一些关于vertical-align实际工作原理的背景阅读(我并不完全确定之前)我尝试实现它来解决问题,它在除了其中一个盒子之外的所有盒子上都能很好地工作,你会在下面的演示中看到我的意思:

http://jsfiddle.net/5vxSP/1/

最后一个方框有第二行文字,这条线最终位于图像下方,有几种方法可以让我想到这样做,但大多数方法都是使用浮动图像,最后一个文本的边距盒子,虽然工作不是一个特别好的方式(好吧,我想是的,无论如何......)

是否有一种优雅的方式,这样文本将保留在框的中间,无论我决定使用的行数/字体大小？

如果我必须使用我原来的解决方案,我很高兴这样做,我只是想知道是否有更好的方法来做到这一点,我还没有发现.

Answer 1

在垂直对齐方面,HTML非常粗制滥造.我发现可靠地执行此操作的唯一方法是执行以下操作...

<div>
    <span style="display: inline-block; vertical-align: middle; height: [The height of your box here]"></span>
    <span style="display: inline-block; vertical-align: middle;">Put your multi-line content here</span>
</div>

vertical-align在CSS中将它应用的内联元素与其周围的其他内联元素对齐.仅在表格上它在表格单元格内对齐.