html里文字居中程式碼怎麼寫？-html教學-PHP中文網

html里文字居中程式碼怎麼寫？

青灯夜游

發布： 2020-05-12 18:16:39

原創

47653 人瀏覽過

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>

登入後複製

效果圖：

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>

登入後複製

效果圖：

html里文字居中程式碼怎麼寫？