本篇文章給大家分享的是有關(guān)CSS如何實現(xiàn)文本左對齊、右對齊和居中對齊,小編覺得挺實用的,因此分享給大家學(xué)習(xí),希望大家閱讀完這篇文章后可以有所收獲,話不多說,跟著小編一起來看看吧。
成都創(chuàng)新互聯(lián)于2013年開始,是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司,擁有項目成都做網(wǎng)站、成都網(wǎng)站建設(shè)網(wǎng)站策劃,項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命,1280元天壇街道做網(wǎng)站,已為上家服務(wù),為天壇街道各地企業(yè)和個人服務(wù),聯(lián)系電話:13518219792語法格式:
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"> 創(chuàng)新互聯(lián)左對齊<br /> 創(chuàng)新互聯(lián)<br /> 創(chuàng)新互聯(lián)<br /> php </div> <div class="TextRight"> 創(chuàng)新互聯(lián)右對齊<br /> 創(chuàng)新互聯(lián)<br /> 創(chuàng)新互聯(lián)<br /> php </div> <div class="TextCenter"> 創(chuàng)新互聯(lián)居中對齊<br /> 創(chuàng)新互聯(lián)<br /> 創(chuàng)新互聯(lián)<br /> php </div> <div class="TextJustify"> 創(chuàng)新互聯(lián)<br /> 兩端對齊<br /> 創(chuàng)新互聯(lián)<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文件。將顯示如下所示的效果。
代碼示例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>
以上就是CSS如何實現(xiàn)文本左對齊、右對齊和居中對齊,小編相信有部分知識點可能是我們?nèi)粘9ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
網(wǎng)頁標(biāo)題:CSS如何實現(xiàn)文本左對齊、右對齊和居中對齊-創(chuàng)新互聯(lián)
文章地址:http://muchs.cn/article2/cdchoc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站改版、App設(shè)計、品牌網(wǎng)站制作、網(wǎng)站制作、企業(yè)建站、網(wǎng)站營銷
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容