這篇文章主要為大家展示了html文字居中的樣式有哪些，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶大家一起來研究并學習一下“html文字居中的樣式有哪些”這篇文章吧。
1、簡易性：超級文本標記語言版本升級采用超集方式，從而更加靈活方便，適合初學前端開發者使用。 2、可擴展性：超級文本標記語言的廣泛應用帶來了加強功能，增加標識符等要求，超級文本標記語言采取子類元素的方式，為系統擴展帶來保證。 3、平臺無關性：超級文本標記語言能夠在廣泛的平臺上使用，這也是萬維網盛行的一個原因。 4、通用性：HTML是網絡的通用語言，它允許網頁制作人建立文本與圖片相結合的復雜頁面，這些頁面可以被網上任何其他人瀏覽到，無論使用的是什么類型的電腦或瀏覽器。
html文字居中的樣式：1、水平居中樣式為“text-align: center;”；2、文字垂直居中樣式“line-height:px數值;”；3、文字垂直居中樣式“display: flex;align-items: center;”。
html文字居中
1、文字水平居中--text-align: center;
text-align 屬性規定元素中的文本的水平對齊方式。
該屬性通過指定行框與哪個點對齊，從而設置塊級元素內文本的水平對齊方式。通過允許用戶代理調整行內容中字母和字之間的間隔，可以支持值 justify；不同用戶代理可能會得到不同的結果。
| 值 | 描述 |
|---|---|
| left | 把文本排列到左邊。默認值：由瀏覽器決定。 |
| right | 把文本排列到右邊。 |
| center | 把文本排列到中間。 |
| justify | 實現兩端對齊文本效果。 |
| inherit | 規定應該從父元素繼承 text-align 屬性的值。 |
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
h2 {
text-align: center
}
h3 {
text-align: left
}
h4 {
text-align: right
}
</style>
</head>
<body>
<h2>這是標題 1</h2>
<h3>這是標題 2</h3>
<h4>這是標題 3</h4>
</body>
</html>效果圖：
2、文字垂直居中
1）、line-height 使單行文字垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 300px;
background: palegoldenrod;
line-height:300px;
}
</style>
</head>
<body>
<div class="box">css 垂直居中了--文本文字</div>
</body>
</html>效果圖：
2）、CSS3的flex布局 使文字垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 300px;
background: paleturquoise;
line-height:300px;
/*設置為伸縮容器*/
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/*垂直居中*/
-webkit-box-align: center;/*舊版本*/
-moz-box-align: center;/*舊版本*/
-ms-flex-align: center;/*混合版本*/
-webkit-align-items: center;/*新版本*/
align-items: center;/*新版本*/
}
</style>
</head>
<body>
<div class="box">css 垂直居中--文本文字（彈性布局）</div>
</body>
</html>
以上就是關于“html文字居中的樣式有哪些”的內容，如果改文章對你有所幫助并覺得寫得不錯，勞請分享給你的好友一起學習新知識，若想了解更多相關知識內容，請多多關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
