CSS居中文本在两个图像之间

Question

我需要展示两张图片和一些文本，如下所示：

------------------------------------------ img1--------一些居中的文本-------img2 ------------------------------------------

其中：

- img1 和 img2 尺寸不同，但宽度非常接近。 - 文本根据所在页面而异，可能是两行而不是一行。 - 文本需要在两张图片之间水平居中，或者在容器的外侧之间居中皆可。 - 文本和图片需要在容器内部垂直居中。

我可以很容易地用表格来解决它，但我不想退回到表格布局。在某些浏览器中，position:inline-block 和 display:table-cell 属性效果很好，但我需要支持 IE6+。

- 3Dave

Answer 1

<style type="text/css">
#image1 { float: left; }
#image2 { float: right; }
#text { text-align: center; }
</style>

- Sjoerd

---

这解决了水平方向的问题，但是所有内容都是顶部对齐的。我还需要垂直居中对齐。 - 3Dave

为了进行垂直对齐，您需要在图像和文本容器上设置高度。然后您可以使用vertical-align:center;。 - NotMe

尝试在 div、span 和 image 上使用 vertical-align，但没有效果。 - 3Dave

vertical-align 使用 "middle" 而不是 "center"。 - Stuart