CSS（層疊樣式表）是一種樣式表語言，用于指定HTML文檔的外觀和格式。通過將內(nèi)容的呈現(xiàn)與網(wǎng)頁結構分離，CSS使您能夠控制網(wǎng)站的布局、顏色、字體和其他樣式。
您可以使用CSS的display: table屬性來構建一個類似表格的結構，以在CSS中對齊文本時使兩列都是直的。然后，使用display: table-cell屬性時，為每一列設置top或bottom作為vertical-align屬性，以適當對齊文本。
方法
以下是 CSS 中對齊文本的一些典型方法 –
使用文本對齊屬性
使用 display 屬性
使用浮動屬性
現(xiàn)在讓我們通過示例詳細了解每種方法。
方法一：使用“text-align”屬性
在 CSS 中對齊文本（兩列都是直的）的第一種方法是使用“text-align”屬性。容器元素內(nèi)的文本可以使用 text-align 屬性進行對齊。它接受中心、左對齊和對齊等值。
示例
在下面的例子中，我們將學習如何使用“text-align”屬性在CSS中對齊文本
第 1 步 – 在 HTML 中創(chuàng)建一個容器元素，如 div –
<div class="container"> <!-- Your content goes here --> </div>
登錄后復制登錄后復制登錄后復制
步驟 2 – 為容器元素內(nèi)的兩列創(chuàng)建兩個子元素 –
<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 步 – 用內(nèi)容填充列元素 –
<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 中創(chuàng)建一個容器元素，如 div –
<div class="container"> <!-- Your content goes here --> </div>
登錄后復制登錄后復制登錄后復制
步驟 2 – 為容器元素內(nèi)的兩列創(chuàng)建兩個子元素 –
<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 步 – 用內(nèi)容填充列元素 –
<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 屬性，元素可以浮動到其父容器的左側或右側?？梢允褂盟鼇韯?chuàng)建在多列中對齊的文本，以創(chuàng)建多列布局。
示例
在下面的例子中，我們將學習如何使用Float屬性在CSS中對齊文本
第 1 步 – 在 HTML 中創(chuàng)建一個容器元素，如 div –
<div class="container"> <!-- Your content goes here --> </div>
登錄后復制登錄后復制登錄后復制
步驟 2 – 為容器元素內(nèi)的兩列創(chuàng)建兩個子元素 –
<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 步 – 用內(nèi)容填充列元素 –
<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屬性指示元素的布局，例如它應該顯示為塊級元素還是內(nèi)聯(lián)元素。
以上就是如何在CSS中對齊文本，使兩列都保持直線？的詳細內(nèi)容，更多請關注www.92cms.cn其它相關文章！
