コアJavascriptテキスト

Michael Zippo

このCSSチュートリアルでは、テキストを中央揃えにして要素をロックする方法を説明します。レイアウト内で要素を水平方向と垂直方向に中央揃えするために使用できるヒントがいくつかあります。

より大きな要素で整列されたテキストを中央揃えにするには、以下に示すように text-align：center;を使用します。：

私はa div

そして、すべてのテキストはtext-alignによって中央に配置されます：center

Alignment Centralブロック要素：

ブロック要素の中央揃えは、HTMLドキュメントのタグを使用して最もよく示されます。コンテナの全体の幅を確認してから、マージンをautoに設定する必要があります。

私はdivです

そして、すべてのテキストは text-align：center

画像を中央に揃える：

画像を中央に配置するには、CSSセレクターでマスディスプレイを変更してから、 ％またはpxを使用した画像要素の幅。 marginをautoに設定します：

下にある画像を中央に配置するには、表示をブロックに変更してから、マージンをautoに設定し、pxまたは％を使用して幅を確認します

divの垂直方向と水平方向の中央に配置：

パディング：

のパディングを調整することです。次に、 text-align：center を使用して、段落を水平方向に中央揃えできます。

私はdivです

そして、すべてのテキストは text-align：center

によって中央に配置されます

下にある画像を中央に配置するには、表示をブロックに変更してから、余白をautoに設定し、pxまたは％を使用して幅を確認します

行の高さ：

line-heightを、テキスト-align：centerを使用して中央に配置するブロック要素の高さに設定して、要素を中央に揃えることもできます。複数の行がある場合は、親と子でline-heightを使用し、子に vertical-align：middle とdisplay：inline-block を追加します：

変換：

要素を中央に配置する別の方法は、位置と変換を使用することです。親を相対位置に配置し、子を絶対位置に配置します。子要素は50％で上下に配置する必要があります。次に、transformプロパティを使用してdiv内のテキストを調整します。このプロパティについては別の記事で詳しく説明しますので、現時点で100％明確でなくても問題ありません：

フレックスボックス：

最後に、flexboxを使用して要素を中央に配置できます。 display：flexを中央揃えにする子の親要素に設定し、align-itemsとrequire-contentを使用して中央揃えにします：

これらは、レイアウトの要素のセンタリングの問題を解決するための最も一般的な方法です。