CSS centering text between two images

自作多情 提交于 2019-12-12 16:16:16

问题


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


回答1:


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


来源:https://stackoverflow.com/questions/3008612/css-centering-text-between-two-images

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!