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 に答える