0

基本的に、画像は中央に配置され（画面解像度が異なり、画像が中央に配置されるため、絶対配置を使用できません）、テキストを上から20ピクセル下、左から右に10ピクセルにしたいです。どうすればいいのですか ？検索しましたが、何もありません。おそらく私のタイピングのせいです。

4

6 に答える 6

1

いくつかのオプションがあります。画像のサイズの div を使用し、それを中央に配置する必要があります。次に、画像をその div の背景として設定するか、div を作成して絶対位置にタグをposition: relative追加することができます。<img>

最初のアプローチの例を次に示します。

HTML:

<div id="imageContainer">
    Some text that's overlaying the image.
</div>

CSS:

#imageContainer {
    width: 275px;
    height: 95px;
    background: url('https://www.google.com/images/srpr/logo4w.png');
    margin: 0 auto;
    left: 0;
    right: 0;
    padding: 20px 0 0 10px;
}

そして、それが機能していることを示すための JSFiddle: http://jsfiddle.net/VD34W/

于 2013-06-11T13:29:02.333 に答える
0

これを試して：

HTML

<div id="theDiv">
    <p>Some text here</p>
</div>

CSS

#theDiv {
    background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvT90hfqXnsPUsrySmYtU2Hj1ypEwCq0muzSCKdxOSmUnZqp_Z);
    width: 300px;
    height: 300px;
}

#theDiv p {
    padding-top: 20px;
    padding-left: 10px;
}

デモ

于 2013-06-11T13:21:11.873 に答える
0

良い質問。

基本的に、上からどれだけ下に、どれだけ左にあるかを言います。

position:relative;
left:10px;
top:-20

ヒント: 画像とテキストの両方を div 内に配置して、テキストが div に対して相対的になるようにします。

またチェックアウト: http://www.w3schools.com/css/css_positioning.asp

于 2013-06-11T13:21:50.813 に答える
0

編集：

テキストをオーバーレイにしたいのでposition: relative、ラッピング要素とposition: absolute内側の要素を使用してハックを使用できます。widthこれにより、ラッピング要素にとheight;がある限り、ラッピング要素内に配置できます。

http://jsfiddle.net/FcBmd/1/

前の回答からの無関係なテキスト: http://jsfiddle.net/FcBmd/を使用している可能性がありますtext-align: center

于 2013-06-11T13:17:22.113 に答える