首頁  >  文章  >  web前端  >  HTML中怎麼能讓文字各種居中對齊? (程式碼範例)

HTML中怎麼能讓文字各種居中對齊? (程式碼範例)

藏色散人
藏色散人原創
2018-08-10 17:38:0360210瀏覽

本篇文章主要介紹如何去寫關於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文字居中的相關知識是否有更進一步的了解呢?其實這裡我們主要記住這些關鍵點,在html中,讓文字居中的css程式碼:

1、平水居中:text-align:center;

text-align 屬性規定元素中的文字的水平對齊方式。

此屬性透過指定行框與哪個點對齊,從而設定區塊級元素內文字的水平對齊方式。透過允許使用者代理程式調整行內容中字母和字之間的間隔,可以支援值 justify;不同使用者代理程式可能會得到不同的結果。

2、垂直居中:line-height:height;

line-height 屬性設定行間的距離(行高)。

註解:不允許使用負值。


以上是HTML中怎麼能讓文字各種居中對齊? (程式碼範例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn