tags:

views:

90

answers:

1

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

------------------------------------------
img1--------some centered text-------img2
------------------------------------------
  • 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.

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

+2  A: 
<style type="text/css">
#image1 { float: left; }
#image2 { float: right; }
#text { text-align: center; }
</style>
Sjoerd
That takes care of the horizontal component, but everything is top-aligned. I need everything to center vertically, as well.
David Lively
In order to do the vertical alignment, you are going to have to set heights on the image and text containers. Then you can use vertical-align:center;
Chris Lively
Attempted using vertical-align on a div, a span and an image with no effect.
David Lively