溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

CSS如何設置文本居中

發(fā)布時間:2022-02-23 17:12:47 來源:億速云 閱讀:172 作者:iii 欄目:開發(fā)技術

這篇文章主要介紹了CSS如何設置文本居中的相關知識,內容詳細易懂,操作簡單快捷,具有一定借鑒價值,相信大家閱讀完這篇CSS如何設置文本居中文章都會有所收獲,下面我們一起來看看吧。

text-align 屬性

CSS 設置文本居中顯示常用的屬性是 text-align,其屬性值分別有 left、right、center、justify。不過 justity 已經(jīng)較為少用了,因為大部分瀏覽不支持。

我們如果直接設置 text-align:center 屬性的話,可以很明顯看到,文字只在水平方位上居中,并未在垂直方位上居中。

如果想讓文本文字在 div 垂直方位上也居中的話,可以直接設置 line-height 屬性,將該屬性值設置為 div 的高度即可。

源代碼如下:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>CSS設置文本居中顯示 - 億速云(yisu.com)</title>
	<style type="text/css">
		div{
			height: 100px;
			width: 300px;
			text-align: center;
			background-color: red;
			line-height: 100px;
		}
	</style>
</head>
<body>
	<div>這段文字將會居中顯示</div>
</body>
</html>

關于“CSS如何設置文本居中”這篇文章的內容就介紹到這里,感謝各位的閱讀!相信大家對“CSS如何設置文本居中”知識都有一定的了解,大家如果還想學習更多知識,歡迎關注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內容。

css
AI