Question

我刚刚进入web dev（主要是iOS，Java，c＃程序员）。我有一个简单的问题，这很烦人。

<div id="banner">
    <img src="Styles/Banner.jpg" alt="banner" />
   <div id="bannerText">
    User ID
    </div>
</div>

我有一个横幅是一个简单的图像（.jpg），我想叠加一些文字。问题是将文本放在横幅上。我真的不想使用apsolute定位。我想让图像和文本都居中。问题是，当使用apsolute定位时，我似乎能够在图像上重叠文本，如果窗口被重新调整，这将会影响。什么是最好/最简单的方法来做到这一点。

感谢所有人的帮助。 GC

Answer 1

Live demo

嘿，现在我觉得你应该想要这个

<强> HTML

<div id="banner">
    <img src="http://rapidgator.net/images/pict-download.jpg" alt="banner" />
   <div id="bannerText">
    User ID
    </div>
</div>

<强>的CSS

#banner{
position:relative;
  background:green;
  padding:10px;
}
img{
vertical-align:top;
}
#bannerText{
position:absolute;
  top:20px;
  left:10px;
  background:red;
}

Demo

Answer 2

您必须为父元素（#banner）指定一个position: relative;，以使其子元素（#bannerText）的绝对位置取决于横幅位置而不是窗口边框。

Answer 3

如果您可以使用css作为背景而不是<img>标记使用css，如下面的示例

#bannerText
  {
    background: url("Styles/Banner.jpg") no-repeat center center;
    width: 123px;
    height: 123px;
    text-align: center;
  }

如果您不想使用Position: 如果你想使用<img>，那就去＆＃34;费拉＆＃34;＆＃34; ANS

在图像上叠加文本

3 个答案: