Web全般 wordpress

divを重ねて上下中央

投稿日:

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;》は要らないです。

テキストを上下中央にするために書き込んでいます。

 

簡単・簡単コピーして使えると思います。

 

 

これは重ね順を上にしています。

 

-Web全般, wordpress
-, , , ,


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

カスタム投稿

【サンプル】プラグインなしでカスタム投稿タイプを複数作る

  あまりWordPressをテクっていない私が、今回はプラグインなしでカスタム投稿タイプを作ってみました。 たぶん、詳しい人からするとかなり簡単にできてしまうんだと思いますが、 詳しい人ほ …

メンバー一覧選手一覧

WordPress テーマLIQUID PRESSでメンバー紹介や選手一覧などを作ってみた②

  1.プラグインCustom Post Type UIをインストール 左メニューのプラグイン→新規追加→検索窓に「Custom Post Type UI」を入力すると出てきます。 インスト …

カスタムフィールド カテゴリー

Advanced Custom Fieldsをカテゴリに使用したときの画像の取得出力

  いろいろ試してみた結果、やっとできたので覚書として記事にしました。   カスタムフィールドのカテゴリー画像作成   Advanced Custom Fieldsのプラ …

webサイト

Webサイトとは?

これまた、Webとは?に出てきた『Webサイト』という言葉ですが、 『ホームページ』や『Webページ』と似たような気がしますが、 正確には、各企業や各団体などが作っている案内や情報などで表示される1ペ …

ホームページ集客

検索順位を上げるために

  ホームページを作った   今では、ホームページ作成が当たり前のようになってきましたね。 例えば、 ・食品関係の通販サイト ・雑貨の通販サイト ・会社の情報、紹介サイト ・美容室 …