首頁 > web前端 > 前端問答 > html怎樣使文字居中

html怎樣使文字居中

藏色散人
發布: 2023-01-06 11:16:17
原創
86291 人瀏覽過

html使文字居中的方法:1、透過「text-align:center;」屬性設定文字水平居中;2、透過「line-height:height;」屬性設定文字垂直居中。

html怎樣使文字居中

本文操作環境:windows7系統、HTML5&&CSS3版、Dell G3電腦。

html文字居中程式碼具體範例如下:

<!DOCTYPE HTML>
<html>
<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 >html文字水平居中</div>
<div >html文字垂直居中</div>
<div >html文字水平上下居中</div>
</body>
</html>
登入後複製

以上程式碼效果在本機測試如下圖:

html怎樣使文字居中

記住這些關鍵點,在html中,讓文字居中的css程式碼:

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

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

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

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

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

註解:不允許使用負值。

【推薦學習:html影片教學

#

以上是html怎樣使文字居中的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板