首頁 > 文章 > web前端 > 如何在CSS中對齊文本，使兩列都保持直線？

如何在CSS中對齊文本，使兩列都保持直線？

王林轉載: 2023-09-15 16:45:03890瀏覽

CSS（層疊樣式表）是一種樣式表語言，用於指定HTML文件的外觀和格式。透過將內容的呈現與網頁結構分離，CSS使您能夠控制網站的佈局、顏色、字體和其他樣式。

您可以使用CSS的display: table屬性來建立一個類似表格的結構，以在CSS中對齊文字時使兩列都是直的。然後，使用display: table-cell屬性時，為每一列設定top或bottom作為vertical-align屬性，以適當地對齊文字。

方法

以下是 CSS 中對齊文字的一些典型方法 -

使用文字對齊屬性
#使用 display 屬性
使用浮動屬性

#現在讓我們透過範例詳細了解每種方法。

方法一：使用「text-align」屬性

在 CSS 中對齊文字（兩列都是直的）的第一種方法是使用「text-align」屬性。容器元素內的文字可以使用 text-align 屬性對齊。它接受中心、左對齊和對齊等值。

範例

在下面的範例中，我們將學習如何使用「text-align」屬性在CSS中對齊文字

第 1 步 - 在 HTML 中建立一個容器元素，如 div -

<div class="container">
   <!-- Your content goes here -->
</div>

步驟 2 - 為容器元素內的兩個欄位建立兩個子元素 -

<div class="container">
   <div class="left-col">
      <!-- Left column content goes here -->
   </div>
   <div class="right-col">
      <!-- Right column content goes here -->
   </div>
</div>

第三步驟− 容器和列元素應新增CSS樣式 −

.container {
   display: flex;
   justify-content: space-between;
}
.left-col {
   width: 49%;
   text-align: left;
}
.right-col {
   width: 49%;
   text-align: right;
}

第 4 步 - 用內容填滿列元素 -

<div class="container">
   <div class="left-col">
      <p>Left column content</p>
   </div>
   <div class="right-col">
      <p>Right column content</p>
   </div>
</div>

第 5 步 - 您可以透過在電腦瀏覽器中預覽結果來觀察排列在兩列直列中的文字。

第 6 步 - 最終程式碼如下所示 -

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      .container {
         display: flex;
         justify-content: space-between;
      }
      .left-col {
         width: 49%;
         text-align: left;
      }
      .right-col {
         width: 49%;
         text-align: right;
      }
   </style>
</head>
<body>
   <div class="container">
      <div class="left-col">
         <p>Left column content</p>
      </div>
      <div class="right-col">
         <p>Right column content</p>
      </div>
   </div>
</body>
</html>

方法二：使用「display屬性」

要建立一個靈活的佈局，請將display屬性設定為flex或grid。使用justify-content和align-items屬性，您可以管理不同佈局模式下元素的位置。

範例

在下面的範例中，我們將學習如何使用display屬性在css中對齊文字

第 1 步 - 在 HTML 中建立一個容器元素，如 div -

<div class="container">
   <!-- Your content goes here -->
</div>

步驟 2 - 為容器元素內的兩個欄位建立兩個子元素 -

<div class="container">
   <div class="left-col">
      <!-- Left column content goes here -->
   </div>
   <div class="right-col">
      <!-- Right column content goes here -->
   </div>
</div>

第三步驟− 容器和列元素應新增CSS樣式 −

.container {
   display: flex;
   justify-content: space-between;
}
.left-col {
   width: 49%;
}
.right-col {
   width: 49%;
}

第 4 步 - 用內容填滿列元素 -

<div class="container">
   <div class="left-col">
      <p>Left column content</p>
   </div>
   <div class="right-col">
      <p>Right column content</p>
   </div>
</div>

第 5 步 - 您可以透過在電腦瀏覽器中預覽結果來觀察排列在兩列直列中的文字。

第 6 步 - 最終程式碼如下所示 -

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      .container {
         display: flex;
         justify-content: space-between;
      }
      .left-col {
         width: 49%;
      }
      .right-col {
         width: 49%;
         text-align: right;
      }
   </style>
</head>
<body>
   <div class="container">
      <div class="left-col">
         <p>Left column content</p>
      </div>
      <div class="right-col">
         <p>Right column content</p>
      </div>
   </div>
</body>
</html>

方法 3：使用「float 屬性」

使用 float 屬性，元素可以浮動到其父容器的左側或右側。可以使用它來建立在多列中對齊的文本，以建立多列佈局。

範例

在下面的例子中，我們將學習如何使用Float屬性在CSS中對齊文字

第 1 步 - 在 HTML 中建立一個容器元素，如 div -

<div class="container">
   <!-- Your content goes here -->
</div>

步驟 2 - 為容器元素內的兩個欄位建立兩個子元素 -

<div class="container">
   <div class="left-col">
      <!-- Left column content goes here -->
   </div>
   <div class="right-col">
      <!-- Right column content goes here -->
   </div>
</div>

第三步驟− 容器和列元素應新增CSS樣式 −

.left-col {
   width: 49%;
   float: left;
   text-align: left;
}
.right-col {
   width: 49%;
   float: right;
   text-align: right;
}

第 4 步 - 用內容填滿列元素 -

<div class="container">
   <div class="left-col">
      <p>Left column content</p>
   </div>
   <div class="right-col">
      <p>Right column content</p>
   </div>
</div>

第 5 步 - 您可以透過在電腦瀏覽器中預覽結果來觀察排列在兩列直列中的文字。

第 6 步 - 最終程式碼如下所示 -

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      .left-col {
         width: 49%;
         float: left;
         text-align: left;
      }
      .right-col {
         width: 49%;
         float: right;
         text-align: right;
      }
   </style>
</head>
<body>
   <div class="container">
      <div class="left-col">
         <p>Left column content</p>
      </div>
      <div class="right-col">
         <p>Right column content</p>
      </div>
   </div>
</body>
</html>

結論

無論是CSS中的text-align屬性或display屬性都可以將文字對齊到兩個直立的列中。 display屬性指示元素的佈局，例如它應該顯示為區塊級元素還是內聯元素。

以上是如何在CSS中對齊文本，使兩列都保持直線？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css html Float 样式表 display flex table

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：我們如何在HTML中使用不同的CSS類別？下一篇：我們如何在HTML中使用不同的CSS類別？

看更多