ベストセラー人気 WordPress テーマTop 30 詳細

div内のdivを中央に配置するには、(CSS)

Last Updated:2022年5月20日| 2のコメント
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

いくつかの記事でボックスを中央に配置されるようにしたい場合が多いのです。 divはalign属性を持って制御がうまくできません。 このような場合は、次のようにXNUMXつのdivを入れ子にして使用して、簡単に中央に配置されるようにすることができます。

他のタグセレクタの場合でも、以下の方法を応用して中央揃えすることが可能です。

CSSを使用してdiv内のdivを中央に配置する方法

Div内Divを中央に配置したい場合は、次のようなcssコードを使用することができます。

#out {
 width: 100%;
 text-align: center;
 }
#in {
 display: inline-block;
 }

例えばhtmlコードは次のような場合に、

<div class="out">
    <div class="in">
        
    <div>
    
</div>

次の図のようにcssを適用すると、内側のdivが中央に配置されていることを知ることができます。

Div内divを中央に配置する
Div内のDivの中央揃え。

一般的な状況で中央揃えに使用されているCSSコード

一般的に、次のような単純なCSSコードで中央に配置しようとすることができます。

.align-center {
  text-align: center;
}

ブロック要素である場合:

.align-center {
  margin: 0 auto;
}

CSS / Javascript / PHPコード販売サイト

参考までに WordPress プラグインは、JavaScript / jQueryテンプレートは、PHPコードなどの各種スクリプトコードを販売する CodecanyonでのCSSコードやスクリプトを購入することができます。 25000個以上のコード、スクリプトが販売されています。

Codecanyonで販売されているCSSコード
Codecanyonで販売されているベストセラーCSSコード

最後に、

以上で、CSSを使用してDiv内Divを中央に配置する方法について説明しました。 中央揃えが思うように知っているされている場合に、この方法を使用すると、必要に応じて、中央に配置されている場合があります。

メモ:



2のコメント

コメント

  1. 他の方法:

    #outer {
    位置:相対;
    }

    #inner {
    margin:auto;
    位置:絶対;
    left:0;
    右:0;
    トップ:0;
    下:0;
    }

    http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div

    応答