資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 CSS 中對齊文字，使兩列都保持直線？
CSS（層疊樣式表）是一種樣式表語言，用於指定 HTML 文件的外觀和格式。CSS 使您可以控制網站的佈局、顏色、字型和其他樣式，從而將內容的呈現與網頁的結構分離。
當兩列都保持直線時，您可以使用 CSS 的 `display: table` 屬性構建類似表格的結構來對齊文字。然後，在使用 `display: table-cell` 屬性時，將 `top` 或 `bottom` 設定為每列的 `vertical-align` 屬性，以適當對齊文字。
方法
以下是一些在 CSS 中對齊文字的常用方法：
使用 `text-align` 屬性
使用 `display` 屬性
使用 `float` 屬性
現在讓我們詳細瞭解每種方法以及示例。
方法 1：使用“text-align”屬性
在 CSS 中對齊文字（兩列都保持直線）的第一種方法是使用“text-align”屬性。可以使用 `text-align` 屬性對容器元素內的文字進行對齊。它接受諸如 `center`、`left` 和 `justify` 之類的值。
示例
在以下示例中，我們將學習如何使用“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>
步驟 3 - 容器和列元素應新增 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>
方法 2：使用“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>
步驟 3 - 容器和列元素應新增 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>
步驟 3 - 容器和列元素應新增 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` 屬性指示元素的佈局，例如它是否應顯示為塊元素或內聯元素。
4K+ 閱讀量
