CSS で text-align と margin: 0 auto を使用して中央に配置する例コード

CSSでtext-align、margin: 0 autoを使用して中央揃えにする

text-alignまたはmargin: 0 autoを使用してページを中央に配置すると、無効な状況が発生する可能性があります。ここでは、問題の説明と解決のための 2 つの例を示します。

例1: text-alignを使用してインライン要素を中央揃えする

親コンポーネント内で画像を中央に配置したいとします。まず、親コンポーネントをブロック要素 (div、p...) にして、親コンポーネントに属性 text-align:center を追加すると、このコンポーネント内のすべてのインライン要素 (span、img...) が中央に表示されます。

例2: マージンを使用してブロック要素を中央に配置する

margin: 0 auto の前提条件は、要素に幅があることです。div を中央に配置する場合は、div の幅を設定してからmargin: 0 autoスタイルを追加する必要があります。

実験結果:

実験コード

<テンプレート>
  <div class="父">
    <div>
      <img src="~@/assets/img/rules-detail-no-record.png">
      <span>私は内部の div コンテンツです</span>
    </div>
    <span>私は外側の div コンテンツです</span>
    <div class="bg"></div>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前:「テスト」
}
</スクリプト>

<スタイルスコープ>
.father{ // 囲まれたインライン要素を中央に配置します。background: #2e90fc;
  テキスト配置: 中央;
}
.bg{ //ブロック要素centeredbackground: #fc2e80;
  幅: 60ピクセル;
  高さ: 60px;
  マージン: 0 自動;
}
</スタイル>

要約する

CSS で text-align と margin: 0 auto を使用して中央に配置する例コードに関するこの記事はこれで終わりです。CSS で text-align と margin: 0 auto を使用して中央に配置する方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。