小編給大家分享一下HTML中使文字各種居中對齊的方法,希望大家閱讀完這篇文章后大所收獲,下面讓我們一起去探討吧!
html文字居中代碼具體示例如下:
<!DOCTYPE HTML> <html lang="en"> <head> <title>html文字居中測試</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>
以上代碼效果在本地測試如下圖:
那么通過本篇文章關于html文字居中的相關知識是否有更進一步的了解呢?其實這里我們主要記住這些關鍵點,在html中,讓文字居中的css代碼:
1、平水居中:text-align:center;
text-align 屬性規定元素中的文本的水平對齊方式。
該屬性通過指定行框與哪個點對齊,從而設置塊級元素內文本的水平對齊方式。通過允許用戶代理調整行內容中字母和字之間的間隔,可以支持值 justify;不同用戶代理可能會得到不同的結果。
2、垂直居中:line-height:height;
line-height 屬性設置行間的距離(行高)。
注釋:不允許使用負值。
看完了這篇文章,相信你對HTML中使文字各種居中對齊的方法有了一定的了解,想了解更多相關知識,歡迎關注億速云行業資訊頻道,感謝各位的閱讀!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。