React 中的文字居中

Rana Hasnain Khan 2023年1月30日 2022年5月18日

React React Alignment

在 React 中水平居中文字
在 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>

輸出：

在 React 中通過內聯樣式居中文字

使多個元素的文字居中的另一種方法是在 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 中有兩種簡單的方法可以使文字垂直居中對齊。

讓我們建立一個標題並將其垂直居中對齊。

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

在上面的程式碼中，我們新增了 lineHeight: '100px' 以顯示文字是垂直居中。

輸出：

在 React 中垂直對齊文字

我們可以看到我們已經成功地將標題垂直居中。

垂直居中多個元素的另一種方法是在 style.css 檔案中新增 CSS 程式碼併為元素分配一個類。

因此，首先，我們將建立一個標題和一個段落，並將 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; 
}

輸出：

使用樣式檔案垂直對齊標題

使用樣式檔案垂直對齊的段落

我們可以看到我們已經成功地將兩個元素垂直居中。

Author: Rana Hasnain Khan

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.