divを重ねて上下中央
投稿日:
divとdivを重ねてしかも上下中央にしたい!
例えば、指定したサイズに背景画像を配置して、その上にメニューやタイトル、キャッチコピーなどを表示したい。
もちろん、画像ファイルになっているタイトルロゴを表示したい時も同じです。
下の例は、背景画像ではなく、背景色にしています。
それでは、基本となるHTMLを下記のようにします。
<div class=”div-under”> /*これは重ね順を下にしています。*/
<div class=”div-up”>これは重ね順を上にしています。</div>
</div>
次に、CSSを次のように記入します。
.div-under{
width:100%;
height:500px;
background:#f5deb3;
display:flex;
justify-content:center;
align-items:center;
}
.div-up{
width:60%;
height:100px;
background:#008000;
color:#fff;
display:flex;
justify-content:center;
align-items:center;
}
説明すると、<div class=”div-under”>という枠の中に、<div class=”div-up”>を入れています。
ただそれだけだと上下中央にはならないので、
.div-underに、《display:flex;》《justify-content:center;》《align-items:center;》を書きこんでいます。
ちなみに、《background:#f5deb3;》は背景色だけの指定なので、背景画像にしたければ、
《background:url( “/gazou.jpg” ) no-repeat;》みたいに書けば画像が配置されます。
“/gazou.jpg”は、格納されている場所、アップロードされている場所です。”http://○○○/△△△/gazou.jpg”って書いてもOK!
あと、no-repeat;は繰り返さないっていうことなので、実際の画像が指定範囲内に2つも3つも表示されることはないです。
続いて、
.div-upについては、画像ロゴだと、《display:flex;》《justify-content:center;》《align-items:center;》は要らないです。
テキストを上下中央にするために書き込んでいます。
簡単・簡単コピーして使えると思います。
関連記事
- PREV
- DIV横並びで回り込みも
- NEXT
- Wordpressで画面が真っ白になってしまった時の対処方法