div ブロック内でテキストを (水平方向と垂直方向に) 中央揃えにするにはどうすればよいですか?

div 内でテキストを水平方向と垂直方向の中央に簡単に配置できます。一つずつ見ていきましょう。

text-align 属性を使用して、Div 内のテキストを水平方向に中央揃えにします。

div 内のテキストを水平方向に中央揃えにするには、text-align 属性を使用します。 text-align 属性は、ブロックレベル要素内の行ボックスの配置を決定します。可能な値は次のとおりです -

• left - 各行ボックスの左端は、ブロックレベル要素のコンテンツ領域の左端に揃えられます。

• right - 各行ボックスの右端は、ブロックレベル要素のコンテンツ領域の右端に揃えられます。

• center - 各行ボックスの中心は、ブロックレベル要素のコンテンツ領域の中心に揃えられます。

• justify - 各行ボックスの端は、ブロックレベル要素のコンテンツ領域の端に揃える必要があります。

• String - 列内のセルの内容は、指定された文字列に合わせて配置されます。

＃＃＃例＃＃＃

次に、text-align 属性を使用して、div 内のテキストを水平方向に中央揃えにします -

リーリー

justify-content プロパティを使用して、Div 内でテキストを水平方向に中央揃えにします

＃＃＃例＃＃＃

div 内のテキストを水平方向に中央揃えにするには、justify-content プロパティを使用します。例を見てみましょう

リーリー

padding プロパティを使用して、Div 内のテキストを垂直方向の中央に配置します。

div 内のテキストを垂直方向の中央に配置するには、padding 属性を使用します。 padding プロパティを使用すると、要素のコンテンツとその境界線の間に表示されるスペースの量を指定できます。次の CSS プロパティを使用してリストを制御できます。次のプロパティ -

を使用して、ボックスの両側のパディングに異なる値を設定することもできます。

padding-bottom

要素の下部パディングを指定します。

padding-top
• 要素の上部のパディングを指定します。
padding-left
• 要素の左パディングを指定します。
padding-right
• 要素の右パディングを指定します。
padding
• は、前述のプロパティの短縮形として使用されます。 ＃＃＃例＃＃＃
次に、padding 属性を使用して div 内のテキストを垂直方向に中央揃えする例を見てみましょう -
• リーリー line-height プロパティを使用して、Div 内のテキストを垂直方向の中央に配置します。 div 内のテキストを垂直方向の中央に配置するには、line-height プロパティを使用します。 line-height プロパティは、テキスト行を構成するインライン ボックスの高さを変更します。

以下は可能な値です -

Normal

- 要素内の行の高さを「適切な」距離に設定するようにブラウザに指示します。

number
• - 要素内の行の実際の高さは、この値に要素のフォント サイズを乗算したものになります。

length
• - 要素内の行の高さは指定された値です。

Percentage
• - 要素内の行の高さは、要素のフォント サイズのパーセンテージとして計算されます。

  ＃＃＃例＃＃＃

  ここで、line-height プロパティを使用して div 内のテキストを垂直方向に中央揃えする例を見てみましょう -
ああああ

以上がdiv ブロック内でテキストを (水平方向と垂直方向に) 中央揃えにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。