＜p＞で左寄りになる場合の対象法

yuiko

2025年2月14日 01:45

pタグにdisplay:flex;を設定そのボックス内でなぜが文字が左寄りになる。 justyfy-content:center;を使ってもうまくいかない場合の対処法。

原因

<p>タグのデフォルト設定:
- <p>はインライン要素を囲むため、余分なマージンやパディングがデフォルトで適用されている。
フレックスボックスの影響:
- display: flex;により、子要素が水平軸に並ぶため、文字もフレックスアイテムとして扱われる。
- ただし、文字そのものはインライン扱いのため、意図した配置にならない場合がある。
justify-contentの誤解:
- justify-content: center;はフレックスアイテムを水平方向で中央揃えにしますが、文字自体を中央揃えにするには他のプロパティも必要。

解決方法

以下のいずれかの方法で解決可能。

方法1: align-items を併用する

p { 
　display: flex;
　justify-content: center;/* 水平方向で中央揃え */
　align-items: center; /* 垂直方向でも中央揃え */
 }

方法2: text-align: center; を使用

text-align: center; はインラインテキストの水平配置を調整するプロパティ。

p {
 text-align: center; /* 文字を中央揃え */
 display: flex;
 justify-content: center; /* フレックスアイテムの中央揃え */
 }

方法3: 余計なマージンやパディングをリセット

フレックスボックスの挙動を崩しているデフォルトの余白をリセットする。

p {
 display: flex;
 justify-content: center;
 align-items: center;
 margin: 0; /* デフォルトの余白をリセット */
 padding: 0; /* パディングをリセット */
 }

方法4: フレックス子要素に変換する（適切なラップを使用）

フレックスで文字を扱う場合、文字列全体をフレックス子要素として明示的に扱うと確実。

<p> <span>文字列</span> </p>

p { 
　display: flex; 
　justify-content: center; 
　align-items: center; 
　} 
p span {
 display: inline-block;
 /* 必要ならカスタムレイアウト */ }

サンプルコード

<!DOCTYPE html>
 <html lang="ja">
  <head> 
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Flexと中央揃え</title> 
   <style> 
    p { 
      display: flex;
      justify-content:center;
      align-items: center;
      height: 100px; /* テキストボックスの高さ */ 
      background-color: #f0f0f0; /* 背景色をつけて確認 */
      margin: 0;
      padding: 0;
    } 
    </style>
  </head> 
  <body> 
    <p>中央揃えのテキスト</p>
  </body>
 </html>

補足

テキストが複数行にわたる場合でも中央揃えにしたい場合は、align-items: center; が重要。
デフォルトの余白や高さが影響している可能性が高いので、marginやpaddingのリセットも忘れない。