2

我刚刚进入网络开发（主要是 iOS、Java、c# 程序员）。我有一个简单的问题，它很烦人。

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

我有一个横幅，它是一个简单的图像 (.jpg)，我想覆盖一些文本。问题是将文本定位在横幅上。我真的不想使用绝对定位。我希望图像和文本都居中。问题是我似乎能够在使用绝对定位时将文本重叠在图像上，如果调整窗口大小，这将受到影响。什么是最好/最简单的方法来做到这一点。

只是想感谢你们所有人的帮助。GC

4

3 回答 3

4

现场演示

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

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;
}

演示

于 2012-08-16T10:36:40.793 回答
2

您必须给父元素 ( #banner) aposition: relative;以使其子元素 ( ) 的绝对位置#bannerText取决于横幅位置而不是窗口边框。

于 2012-08-16T10:36:31.867 回答
1

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

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

如果您不想使用Position: ，如果您想使用<img>，请使用“feeela's”ans

于 2012-08-16T10:40:39.353 回答