html文字居中代碼怎么寫?相信有很多人都不太了解,今天小編為了讓大家更加了解html文字居中代碼,所以給大家總結了以下內容,一起往下看吧。

文字水平居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>水平居中</title>
<style>
.box {
width: 300px;
height: 200px;
background: palegoldenrod;
text-align:center;
}
</style>
</head>
<body>
<div class="box">水平居中了--文本文字</div>
</body>
</html>效果圖:

說明:text-align
text-align是一個基本的屬性,它會影響一個元素中的文本行互相間的對齊方式。值left、right和center會導致元素中的文本分別左對齊、右對齊和居中,想要使文本居中,直接使用center即可。
該屬性設置文本和img標簽等一些內聯對象(或與之類似的元素)的居中。
文字垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>垂直居中</title>
<style>
.box {
width: 300px;
height: 300px;
background: paleturquoise;
line-height:300px;
}
</style>
</head>
<body>
<div class="box">垂直居中了--文本文字</div>
</body>
</html>效果圖:

line-height 屬性設置行間的距離(行高)。不允許使用負值。
該屬性會影響行框的布局。在應用到一個塊級元素時,它定義了該元素中基線之間的最小距離而不是最大距離。
關于html文字居中代碼怎么寫就分享到這里了,當然并不止以上和大家分析的辦法,不過小編可以保證其準確性是絕對沒問題的。希望以上內容可以對大家有一定的參考價值,可以學以致用。如果喜歡本篇文章,不妨把它分享出去讓更多的人看到。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。