如何在 HTML 中将文本居中放置在图像的顶部答案

【问题标题】：How to center text on top of image in HTML如何在 HTML 中将文本居中放置在图像的顶部
【发布时间】：2013-06-26 08:25:49
【问题描述】：

在搜索了很多指南后，我设法做到了这一点：http://img541.imageshack.us/img541/491/1i7.png 但是在其他网站上使用它时，文本放错了位置（您可以在http://www.indiedb.com/games/celosia 看到）。这是我使用的代码：

<IMG SRC="http://img196.imageshack.us/img196/2261/vvpp.png">
<DIV STYLE="position:absolute; top:10px; left:30px; width:900px; height:25px">
<CENTER><FONT SIZE="+1" COLOR="white">Celosia - the gothic memory card game is a game for everyone, new to this genre or veterans, you will truly enjoy the dark atmosphere and awesome music. Help a goddess, travel around the world and unveil a big mystery or test your skills in the Time attack or Boss modes in over 50 levels. Celosia is currently in Alpha stage so everything you see is subject to changes. You can also follow the official Facebook or Twitter page for updates and news.</FONT></CENTER>
</DIV>

【问题讨论】：

我认为最好的方法是用您的文本定义 div 并将您的图像用作 div 的背景图像（在 CSS 中）。

标签： html image center

【解决方案1】：

<DIV STYLE="position:absolute; top:10px; left:30px; width:900px; height:25px;background-url:http://img196.imageshack.us/img196/2261/vvpp.png;">
<CENTER><FONT SIZE="+1" COLOR="white">Celosia - the gothic memory card game is a game for        everyone, new to this genre or veterans, you will truly enjoy the dark atmosphere and awesome     music. Help a goddess, travel around the world and unveil a big mystery or test your skills in     the Time attack or Boss modes in over 50 levels. Celosia is currently in Alpha stage so     everything you see is subject to changes. You can also follow the official Facebook or Twitter     page for updates and news.</FONT></CENTER>
</DIV>

更新：

试试这个。 http://jsfiddle.net/astephenb/mBu4h/

【讨论】：

我已经测试过了，它没有显示任何图像或文字。文本位置也是一样的，你确定它现在不是居中吗？