CSS centering text between two images

Posted by David Lively on Stack Overflow See other posts from Stack Overflow or by David Lively
Published on 2010-06-09T18:14:07Z Indexed on 2010/06/09 18:22 UTC
Read the original article Hit count: 335

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

© Stack Overflow or respective owner

Related posts about css-layout

Related posts about css-positioning