※ ChatGPTを利用し、要約された質問です(原文:CSSでのブロックのセンタリングについ)
CSSでのブロックのセンタリングの問題
このQ&Aのポイント
CSSで指定したFlashが画面の中央に表示されない問題について
FlashのWidthとFlash.sectionのWidthが異なるため、Flash.sectionが画面の中央に表示されない
Flash.sectionのWidthを修正して、画面の中央に表示されるようにする方法について
いつもお世話になっております!
BackgroundにFlashを指定して、その上に別のブロックがくるように指定しています。
FlashのCSSの指定が、#flashと#flash object。その上に#flash.sectionが表示されるようにしているのですが、
Flashの大きさとFlash.sectionのWidthが違うせいか、Flash.sectionが画面の中央に表示されません。
FlashのWidthが1800pxでその真ん中(900px地点)からFlash.sectionが表示されてしまいます。
これをうまく、画面の中央に表示されるよう、指定することはできないでしょうか?
ご存知の方、何卒ご教授願います!!!
CSS指定は下記の通りです。
div#sub{
text-align:center;
overflow:auto;
}
#flash {
width:1800px;
height:340px;
margin:0 auto;
position:relative;
text-align:center;
}
#flash object {
position:absolute;
top:0;
left:0;
z-index:0;
}
#flash .section {
position:relative;
z-index:5;
width:1000px;
text-align:center;
margin:0 auto;
}
補足
早速のご回答ありがとうございます。 この場合、FlashをBackgroundとしていますので、backgroundというものは実際には存在せず、レイヤーを上に重ねている感じになります。 HTML部分は下記の通りです。 Flashが一番最下層のレイヤー、その上に、画像とテキストを別レイヤーで重ねている感じです。 <div id="sub"> <div id="flash"> <object type="application/x-shockwave-flash" width="1800" height="340" title="title" data="FlashURL"> <param name="movie" value="Flash.swf" /> <param name="quality" value="high" /> <param name="wmode" value="transparent" /> </object> <div class="section" style="text-align:center;"> <div style="margin-left:10px; float:left; width:174px; background:url(back5.jpg); background-repeat:repeat-y;"><img src="logo4.jpg" /> </div> <div style="margin-right:10px; margin-left:590px; padding-top:490px; float:right; width:212px; color:#95C6DD; font:Verdana, Geneva, sans-serif; font-size:12px; text-align:left; font-weight:bold; line-height:120%;"> Text<br /> Text<br /> Text<br /> Text<br /> Text </div> </div><!-- Section --> </div><!--Flash --> </div> 私の説明不足ですみません!! この場合のSection部分のセンタリングを試みているのですが、どうしてもFlashの1800pxが邪魔をして1800pxを主体としてのセンタリングとなってしまうため、画面のセンタリングになりません。 もしお分かりになりましたらご教授いただけると助かります。 よろしくお願いします!