CSS（層疊樣式表）是一種樣式表語言，用于指定HTML文檔的外觀和格式。通過將內(nèi)容的呈現(xiàn)與網(wǎng)頁結(jié)構(gòu)分離，CSS使您能夠控制網(wǎng)站的布局、顏色、字體和其他樣式。
您可以使用CSS的display: table屬性來構(gòu)建一個類似表格的結(jié)構(gòu)，以在CSS中對齊文本時使兩列都是直的。然后，使用display: table-cell屬性時，為每一列設(shè)置top或bottom作為vertical-align屬性，以適當(dāng)對齊文本。
方法
以下是 CSS 中對齊文本的一些典型方法 –
使用文本對齊屬性
使用 display 屬性
使用浮動屬性
現(xiàn)在讓我們通過示例詳細(xì)了解每種方法。
方法一：使用“text-align”屬性
在 CSS 中對齊文本（兩列都是直的）的第一種方法是使用“text-align”屬性。容器元素內(nèi)的文本可以使用 text-align 屬性進(jìn)行對齊。它接受中心、左對齊和對齊等值。
示例
在下面的例子中，我們將學(xué)習(xí)如何使用“text-align”屬性在CSS中對齊文本
第 1 步 – 在 HTML 中創(chuàng)建一個容器元素，如 div –
<div class="container"> <!-- Your content goes here --> </div>
登錄后復(fù)制登錄后復(fù)制登錄后復(fù)制
步驟 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>
登錄后復(fù)制登錄后復(fù)制登錄后復(fù)制
第三步? 容器和列元素應(yīng)添加CSS樣式 ?
.container {
display: flex;
justify-content: space-between;
}
.left-col {
width: 49%;
text-align: left;
}
.right-col {
width: 49%;
text-align: right;
}
登錄后復(fù)制
第 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>
登錄后復(fù)制登錄后復(fù)制登錄后復(fù)制
第 5 步 – 您可以通過在計(jì)算機(jī)瀏覽器中預(yù)覽結(jié)果來觀察排列在兩列直列中的文本。
第 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>
登錄后復(fù)制
方法二：使用“display屬性”
要建立一個靈活的布局，請將display屬性設(shè)置為flex或grid。使用justify-content和align-items屬性，您可以管理不同布局模式下元素的位置。
示例
在下面的例子中，我們將學(xué)習(xí)如何使用display屬性在css中對齊文本
第 1 步 – 在 HTML 中創(chuàng)建一個容器元素，如 div –
<div class="container"> <!-- Your content goes here --> </div>
登錄后復(fù)制登錄后復(fù)制登錄后復(fù)制
步驟 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>
登錄后復(fù)制登錄后復(fù)制登錄后復(fù)制
第三步? 容器和列元素應(yīng)添加CSS樣式 ?
.container {
display: flex;
justify-content: space-between;
}
.left-col {
width: 49%;
}
.right-col {
width: 49%;
}
登錄后復(fù)制
第 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>
登錄后復(fù)制登錄后復(fù)制登錄后復(fù)制
第 5 步 – 您可以通過在計(jì)算機(jī)瀏覽器中預(yù)覽結(jié)果來觀察排列在兩列直列中的文本。
第 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>
登錄后復(fù)制
方法 3：使用“float 屬性”
使用 float 屬性，元素可以浮動到其父容器的左側(cè)或右側(cè)?？梢允褂盟鼇韯?chuàng)建在多列中對齊的文本，以創(chuàng)建多列布局。
示例
在下面的例子中，我們將學(xué)習(xí)如何使用Float屬性在CSS中對齊文本
第 1 步 – 在 HTML 中創(chuàng)建一個容器元素，如 div –
<div class="container"> <!-- Your content goes here --> </div>
登錄后復(fù)制登錄后復(fù)制登錄后復(fù)制
步驟 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>
登錄后復(fù)制登錄后復(fù)制登錄后復(fù)制
第三步? 容器和列元素應(yīng)添加CSS樣式 ?
.left-col {
width: 49%;
float: left;
text-align: left;
}
.right-col {
width: 49%;
float: right;
text-align: right;
}
登錄后復(fù)制
第 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>
登錄后復(fù)制登錄后復(fù)制登錄后復(fù)制
第 5 步 – 您可以通過在計(jì)算機(jī)瀏覽器中預(yù)覽結(jié)果來觀察排列在兩列直列中的文本。
第 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>
登錄后復(fù)制
結(jié)論
無論是CSS中的text-align屬性還是display屬性都可以將文本對齊到兩個直立的列中。display屬性指示元素的布局，例如它應(yīng)該顯示為塊級元素還是內(nèi)聯(lián)元素。
以上就是如何在CSS中對齊文本，使兩列都保持直線？的詳細(xì)內(nèi)容，更多請關(guān)注www.92cms.cn其它相關(guān)文章！
