小編給大家分享一下HTML中使文字各種居中對(duì)齊的方法,希望大家閱讀完這篇文章后大所收獲,下面讓我們一起去探討吧!
html文字居中代碼具體示例如下:
<!DOCTYPE HTML> <html lang="en"> <head> <title>html文字居中測(cè)試</title> <meta charset="UTF-8"> <style type="text/css"> body{background: #ddd;} div{width:300px;height:180px;margin:10px auto;color:#fff;font-size:24px;} .box1{background: #71a879;text-align: center;} .box2{background: #6a8bbc;line-height: 200px;} .box3{background: #dea46b;text-align: center;line-height: 200px;} </style> </head> <body> <div class="box1">html文字水平居中</div> <div class="box2">html文字垂直居中</div> <div class="box3">html文字水平上下居中</div> </body> </html>
以上代碼效果在本地測(cè)試如下圖:
那么通過本篇文章關(guān)于html文字居中的相關(guān)知識(shí)是否有更進(jìn)一步的了解呢?其實(shí)這里我們主要記住這些關(guān)鍵點(diǎn),在html中,讓文字居中的css代碼:
1、平水居中:text-align:center;
text-align 屬性規(guī)定元素中的文本的水平對(duì)齊方式。
該屬性通過指定行框與哪個(gè)點(diǎn)對(duì)齊,從而設(shè)置塊級(jí)元素內(nèi)文本的水平對(duì)齊方式。通過允許用戶代理調(diào)整行內(nèi)容中字母和字之間的間隔,可以支持值 justify;不同用戶代理可能會(huì)得到不同的結(jié)果。
2、垂直居中:line-height:height;
line-height 屬性設(shè)置行間的距離(行高)。
注釋:不允許使用負(fù)值。
看完了這篇文章,相信你對(duì)HTML中使文字各種居中對(duì)齊的方法有了一定的了解,想了解更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道,感謝各位的閱讀!
本文標(biāo)題:HTML中使文字各種居中對(duì)齊的方法-創(chuàng)新互聯(lián)
網(wǎng)址分享:http://www.rwnh.cn/article18/dopsgp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供小程序開發(fā)、網(wǎng)站收錄、虛擬主機(jī)、域名注冊(cè)、網(wǎng)站營(yíng)銷、靜態(tài)網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容