CSS两个图像之间的中心文本 [英] CSS centering text between two images

问题描述

我需要显示两个图片和一些文字：

I need to display two images and some text like so:

------------------------------------------
img1--------some centered text-------img2
------------------------------------------

• img1和img2尺寸不同，但宽度非常接近


• 文本根据显示的页面而变化，并且可以包括两行而不是一行。


• 文本需要在两个图像之间水平居中，或者
$ b
• img1 and img2 are not the same dimensions, but their widths are very close
• The text is variable depending on the page in which it is displayed, and may include two lines instead of one.
• The text needs to centered horizontally between the two images, or between the outside of the container (either will be fine)
• the text AND the images need to be centered vertically within the container.

我可以很容易地用一个表来做到这一点，但是我不想退出布局。 position：inline-block 和 display：table-cell 属性在某些浏览器中工作得很好， IE6 +。

I can do this VERY easily with a table, but I'd rather not retreat to that for layout. The position:inline-block and display:table-cell attributes work great in some browsers, but I need to support IE6+.

推荐答案

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

这篇关于CSS两个图像之间的中心文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！