React にテキストのセンタリング

1. React でテキストを水平方向に中央揃え
2. React でテキストを垂直方向に中央揃え

React でテキストを中央に配置する方法を紹介するためにさまざまな方法を使用します。

React でテキストを水平方向に中央揃え

ページで作業するときは、テキストを右、左、または中央に揃える必要があります。index.tsx ファイルの style 内の textAlign プロパティを使用して、React でテキストを整列させるのは非常に簡単です。

# react
<div>
        <h2 style={{textAlign: "center"}}>Inline Styling</h2>
        <p style={{textAlign: "center"}}>
        This text is aligned center by adding inline css
        </p>
      </div>

出力：

複数の要素のテキストを中央に配置する別の方法は、style.css ファイルに css コードを追加することです。

h2 タグを使用して見出しを作成し、p タグを使用して段落を作成しましょう。次に、textCenter のクラスを両方の要素に追加します。

# react
<h2 className="centerText">Using Style.css</h2>
        <p className="centerText">This text is aligned center by adding css in style.css file</p>

style.css ファイルに CSS コードを書いてみましょう。

# react
.centerText{
  text-align: center;
}

出力：

React でテキストを垂直方向に中央揃え

テキストの見栄えを良くし、UI を改善するために、テキストを垂直方向に揃える必要がある場合があります。React でテキストを垂直方向に中央に揃える簡単な方法は 2つあります。

見出しを作成して、垂直方向の中央に揃えましょう。

# react
<h2 style={{ flex: 1, justifyContent: 'center', alignItems:"center", lineHeight:"100px"}}>Aligning Vertically</h2>

上記のコードでは、テキストが垂直方向に中央揃えであることを示すために lineHeight: '100px'を追加しました。

出力：

見出しを垂直方向に中央に配置することに成功したことがわかります。

複数の要素を垂直方向に中央揃えするもう 1つの方法は、style.css ファイルに CSS コードを追加し、要素に class を割り当てることです。

したがって、まず、1つの見出しと段落を作成し、両方の要素に verticalCenter クラスを割り当てます。

# react
<h2 className="verticalCenter">Using Style.css</h2>
        <p className="verticalCenter">This text is vertically aligned center by adding css in style.css file</p>

style.css ファイルに CSS コードを追加しましょう。

# react
.verticalCenter{
  flex: 1;
  justify-content: center;
  line-height: 100px; 
}

出力：

両方の要素を垂直方向に中央に配置することに成功したことがわかります。