怎么使用CSS實(shí)現(xiàn)文本左對(duì)齊、右對(duì)齊和居中對(duì)齊

發(fā)布時(shí)間：2022-02-24 15:02:53 來(lái)源：億速云閱讀：298 作者：小新欄目：web開(kāi)發(fā)

這篇文章主要介紹怎么使用CSS實(shí)現(xiàn)文本左對(duì)齊、右對(duì)齊和居中對(duì)齊，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

　　語(yǔ)法格式：

　　text-align:(文本位置）

　　位置說(shuō)明

　　left 左對(duì)齊

　　right 右對(duì)齊

　　center 居中對(duì)齊

　　justify 兩端對(duì)齊

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

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

　　text-align：left;

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

　　text-align：right;

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

　　text-align：center;

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

　　text-align：justify;

　　我們來(lái)看具體的代碼示例1：

　　TextAlign.html

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="utf-8"/>

　　<linkrel="stylesheet"href="TextAlign.css"/>

　　</head>

　　<body>

　　<divclass="TextLeft">

　　php中文網(wǎng)左對(duì)齊<br/>

　　php中文網(wǎng)<br/>

　　php

　　</div>

　　<divclass="TextRight">

　　php中文網(wǎng)右對(duì)齊<br/>

　　php中文網(wǎng)<br/>

　　php

　　</div>

　　<divclass="TextCenter">

　　php中文網(wǎng)居中對(duì)齊<br/>

　　php中文網(wǎng)<br/>

　　php

　　</div>

　　<divclass="TextJustify">

　　php中文網(wǎng)<br/>

　　兩端對(duì)齊<br/>

　　php中文網(wǎng)<br/>

　　php

　　</div>

　　</body>

　　</html>

　　TextAlign.css

　　.TextLeft{

　　margin-top:24px;

　　margin-left:32px;

　　border:1pxsolid#ff6a00;

　　width:480px;

　　text-align:left;

　　}

　　.TextRight{

　　margin-top:24px;

　　margin-left:32px;

　　border:1pxsolid#ff6a00;

　　width:480px;

　　text-align:right;

　　}

　　.TextCenter{

　　margin-top:24px;

　　margin-left:32px;

　　border:1pxsolid#ff6a00;

　　width:480px;

　　text-align:center;

　　}

　　.TextJustify{

　　margin-top:24px;

　　margin-left:32px;

　　border:1pxsolid#ff6a00;

　　width:480px;

　　text-align:justify;

　　text-justify:distribute-all-lines;

　　}

怎么使用CSS實(shí)現(xiàn)文本左對(duì)齊、右對(duì)齊和居中對(duì)齊

以上是“怎么使用CSS實(shí)現(xiàn)文本左對(duì)齊、右對(duì)齊和居中對(duì)齊”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

怎么使用CSS實(shí)現(xiàn)文本左對(duì)齊、右對(duì)齊和居中對(duì)齊

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽