如何使用CSS實現(xiàn)文本左對齊、右對齊和居中對齊

來源：懂視網(wǎng) 責編：小采時間：2020-11-02 22:12:58

如何使用CSS實現(xiàn)文本左對齊、右對齊和居中對齊

如何使用CSS實現(xiàn)文本左對齊、右對齊和居中對齊:文本的位置在網(wǎng)頁布局中是必不可少的，今天的這篇文章就來給大家分享關(guān)于使用CSS實現(xiàn)文本左對齊、右對齊和居中對齊的方法，下面我們來看具體的內(nèi)容。要設(shè)置文本對齊（左對齊，右對齊，居中對齊）需要用到的CSS屬性是text-align屬性。（相關(guān)推薦：CSS學習手

推薦度：

點擊下載本文 文檔為doc格式

導讀如何使用CSS實現(xiàn)文本左對齊、右對齊和居中對齊:文本的位置在網(wǎng)頁布局中是必不可少的，今天的這篇文章就來給大家分享關(guān)于使用CSS實現(xiàn)文本左對齊、右對齊和居中對齊的方法，下面我們來看具體的內(nèi)容。要設(shè)置文本對齊（左對齊，右對齊，居中對齊）需要用到的CSS屬性是text-align屬性。（相關(guān)推薦：CSS學習手

文本的位置在網(wǎng)頁布局中是必不可少的，今天的這篇文章就來給大家分享關(guān)于使用CSS實現(xiàn)文本左對齊、右對齊和居中對齊的方法，下面我們來看具體的內(nèi)容。

要設(shè)置文本對齊（左對齊，右對齊，居中對齊）需要用到的CSS屬性是text-align屬性。（相關(guān)推薦：CSS學習手冊）

語法格式：

text-align :(文本位置）

位置	說明
left	左對齊
right	右對齊
center	居中對齊
justify	兩端對齊

接下我們來分別看看這四種對齊方式的設(shè)置方法

文本左對齊的設(shè)置方法：

text-align：left;

文本右對齊設(shè)置方法：

text-align：right;

文本居中對齊設(shè)置方法：

text-align：center;

文本兩端對齊設(shè)置方法：

text-align：justify;

我們來看具體的代碼示例1：

TextAlign.html

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <link rel="stylesheet" href="TextAlign.css" />
 <title></title>
 </head>
 <body>
 <div class="TextLeft">
 Gxlcms左對齊<br />
 Gxlcms<br />
 Gxlcms<br />
 php
 </div>
 <div class="TextRight">
 Gxlcms右對齊<br />
 Gxlcms<br />
 Gxlcms<br />
 php
 </div>
 <div class="TextCenter">
 Gxlcms居中對齊<br />
 Gxlcms<br />
 Gxlcms<br />
 php
 </div>
 <div class="TextJustify">
 Gxlcms<br />
 兩端對齊<br />
 Gxlcms<br />
 php
 </div>
 </body>
 </html>

TextAlign.css

.TextLeft{
 margin-top:24px; 
 margin-left:32px; 
 border:1px solid #ff6a00; 
 width:480px; 
 text-align:left;
}
.TextRight {
 margin-top: 24px; 
 margin-left: 32px; 
 border: 1px solid #ff6a00; 
 width: 480px; 
 text-align: right;
}
.TextCenter {
 margin-top: 24px; 
 margin-left: 32px; 
 border: 1px solid #ff6a00; 
 width: 480px; 
 text-align: center;
}
.TextJustify {
 margin-top: 24px; 
 margin-left: 32px; 
 border: 1px solid #ff6a00; 
 width: 480px; 
 text-align: justify; 
 text-justify: distribute-all-lines;
}

顯示結(jié)果

使用Web瀏覽器顯示上述HTML文件。將顯示如下所示的效果。

360截圖20181115101423160.jpg

代碼示例2：

文本左對齊：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
.leftText{
 text-align:left; 
 }
	</style>
</head>
<body>
<div class="leftText">左對齊</div>
</body>
</html>

文本右對齊：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
.rightText{
 text-align:right; 
 }
	</style>
</head>
<body>
<div class="rightText">右對齊</div>
</body>
</html>

居中對齊：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
.centerText{
 text-align:center; 
 }
	</style>
</head>
<body>
<div class="centerText">居中對齊</div>
</body>
</html>

本篇文章到這里就全部結(jié)束了，更多關(guān)于文本對齊的內(nèi)容大家可以關(guān)注Gxlcms的CSS視頻教程欄目！！！

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

如何使用CSS實現(xiàn)文本左對齊、右對齊和居中對齊

推薦度：

點擊下載本文 文檔為doc格式

標簽：文字居中左對齊

熱門焦點

如何使用CSS實現(xiàn)文本左對齊、右對齊和居中對齊

如何使用CSS實現(xiàn)文本左對齊、右對齊和居中對齊

如何使用CSS實現(xiàn)文本左對齊、右對齊和居中對齊

最新推薦

猜你喜歡

熱門推薦