divとdivを別のdivの中央に配置する方法

すべての記事で、別のdiv内のdivを中央に置くか、別のdivの一番下にdivを置くことで取り引きを見つけることができました。私は両方をするために何かを見つけることができませんでした。divとdivを別のdivの中央に配置する方法

私のコードは次のとおりです。

<body style="text-align:center; margin:0; padding:0;"> 
    <div style="width:100%; height:100px; background-image:url(header.png);position:relative;"> 
    <div> 
     <div style="height:75px; width:950px; background-image:url(formtop.png); bottom:0; position: absolute; margin-left:auto; margin-right:auto;"> 
     <div style="float:left; position:relative; left:30px; top:15px"> 
      <img src="logo.png" width="88" height="38"> 
     </div> 
     <div style="margin-top:15px"> 
      <h1>Product Form</h1> 
     </div> 
    </div> 
    </div> 
</div> 
</body>

私がやりたいすべて含むdiv要素の底部と中央部でformtop.pngのdivを置くことです。私はどちらか一方をすることができますが、私は両方を行うことはできません。 position:absoluteをposition:relativeに変更すると、画像自体は中心になりすぎますが、高すぎます。私は絶対に戻ってそれを変更するとき、それは含まれてdivの一番下にうまく座っているが、IEのそれは右の方法であり、Firefoxのそれはページの左側にある。

アドバイスはありますか？

出典

2011-12-22 Dev Newb

HTMLコードを修正できますか？現在のところ、不正な形式であり、それがどのようになっているのかを明確に理解することは難しいです。 – Jacob

また、インラインスタイルを使用する代わりに別のスタイルシートとしてCSSを投稿した方が解析がはるかに簡単です。 – Jacob

あなたはformtop.png <div> 100％の幅を設定し、CSSを使用して、背景画像を中心としてそれを行うことができます：余談として

<!-- div with the formtop.png background --> 
<div style=" 
    height:75px; 
    width:100%; 
    background:url(formtop.png) no-repeat 50% 0; 
    bottom:0; 
    position: absolute;">

を、あなたはの.cssファイルにすべてのあなたのインラインスタイルを移動した場合

<div class="formTop"> 

.formTop {  
    position: absolute; 
    bottom: 0; 
    left: 0;  

    height: 75px; 
    width: 100%; 

    /* Set the background image to centered in this element */ 
    background: url(formtop.png) no-repeat 50% 0;  
}

出典

2011-12-22 19:14:10 Pat

ありがとうございます。それはまさに私が必要としたものでした。 IEとFirefoxでうまく見えます。再度、感謝します！ –

はあなたが絶対配置要素のためleft:0; right:0;トリックを試してみました：、あなたのコードは、と連携し、維持するために非常に簡単になりますか？ IE7やIE6では動作しませんが、残りのブラウザやそれ以降のバージョンでは機能します。

これはhttp://jsfiddle.net/6w6VR/

出典

2011-12-22 19:24:30

こんにちは、素敵な方法...！私は今までアップアップを理解していない...とにかく、それはクールです。ポジションがマージンの行動にどのように影響するか尋ねることはできますか？ – Michele

divを中心にして*中央から移動したい場合は、「margin-right」と「margin-left」を「auto」として使用する必要があるため、このトリックを使用することはできません。しかし、あなたはまだ内部のdivを入れ子にして、そのマージン、ポジションなどを使って遊ぶことができます... –

は後で自分のスタイルを変更したいかもしれないので、スタイルだけのために使用されているHTML要素を避けるようにしてください例です。あなたはdivの背景としてあなたのheader.pngをを設定することができます

div { 
    width:100%; 
    position: relative; 
    background-image: url(header.png); 
} 

div:after { 
    display: block; 
    position: absolute; 
    z-index: -1; 
    bottom: 0; 
    left: 0; 
    content: ''; 
    width: 100%; 
    height: 20px; 
    background: url(http://upload.wikimedia.org/wikipedia/commons/3/38/Wiktionary-ico-de.png); 
    background-repeat: no-repeat; 
    background-position: center 0px; 
}

：:after疑似クラスを使用しています

See this example、。

出典

2011-12-22 19:49:03 Yogu

divとdivを別のdivの中央に配置する方法

答えて

関連する問題