首頁 > 文章 > web前端 > html文字居中的樣式是什麼

html文字居中的樣式是什麼

青灯夜游原創: 2021-02-22 14:48:1718647瀏覽

html文字居中的樣式：1、水平居中樣式為「text-align: center;」；2、文字垂直居中樣式「line-height:px數值;」；3、文字垂直居中樣式「 display: flex;align-items: center;」。

html文字居中的樣式是什麼

本教學操作環境：windows7系統、HTML5版、Dell G3電腦。

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">
			h1 {
				text-align: center
			}
			
			h2 {
				text-align: left
			}
			
			h3 {
				text-align: right
			}
		</style>
	</head>

	<body>
		<h1>这是标题 1</h1>
		<h2>这是标题 2</h2>
		<h3>这是标题 3</h3>
	</body>

</html>

效果圖：

html文字居中的樣式是什麼

【推薦教學：CSS影片教學、《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>

效果圖：

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文字居中的樣式是什麼

更多程式相關知識，請造訪：程式設計影片！！

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

陳述：

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

上一篇：html中p怎麼設定虛線邊框下一篇：html中p怎麼設定虛線邊框

看更多