css怎麼把文字居中-css教學-PHP中文網

首頁

web前端

css教學

css怎麼把文字居中

青灯夜游

Apr 20, 2021 pm 05:18 PM

css

文字居中的方法：1、使用「text-align:center;」語句設定水平居中；2、利用CSS3的flex佈局設定垂直居中；3、使用「vertical-align:middle;display: table-cell;”語句設定垂直居中。

css怎麼把文字居中

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

css設定文字水平居中

#在CSS中可以使用text-align屬性來設定字體水平居中。此屬性規定元素中的文字的水平對齊方式，透過使用center值設定文字居中。

text-align語法：

text-align : left | right | center | justify

登入後複製

text-align參數值與說明：

left : 左對齊
right : 右對齊
#center : 居中
##justify : 兩端對齊（不建議使用，通常大部分瀏覽器不使用）

我們對text-align常用的參數值為left、right、center

該屬性有如下幾個特點：

1）、text-align的center應用在一個容器上，它只針對容器裡面的文字以及容器裡面的display為inline或者inline-block的容器，如果裡面的容器display為block，則裡面的容器的內容不會居中。

2）、text-align具有向下傳遞性，會不斷地向子元素傳遞。如果設定一個div，則其子div中的內容也會居中。

範例：

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

</html>

登入後複製

效果圖：

css怎麼把文字居中

（學習影片分享：

css影片教學）

css設定文字垂直居中

1、CSS3的flex版面讓文字垂直居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 垂直居中</title>
		<style>
			.box{
			    width: 300px;
			    height: 300px;
			    background: palegoldenrod;
			    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>

登入後複製

效果圖：

css怎麼把文字居中

2、vertical-align:middle display:table-cell 讓文字垂直居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 垂直居中</title>
		<style>
			.box {
				width: 300px;
				height: 300px;
				background: palegoldenrod;
				vertical-align:middle;
				display:table-cell;
			}
		</style>

	</head>

	<body>

		<div class="box">css 文本文字--水平居中</div>

	</body>

</html>

登入後複製

效果圖：

css怎麼把文字居中

#說明：vertical-align:middle display:table-cell能夠讓單行文字、多行文字都居中。但因為 table-cell 是 inline 類型，所以會導致原來的區塊級元素每個 div 一行都移動到了同一行。如果需要分列兩行，則需要在外面額外添加容器對位置進行控制。

更多程式相關知識，請造訪：

程式設計影片！！

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

本網站聲明

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

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7470

CakePHP 教程

1377

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

bootstrap按鈕怎麼用 Apr 07, 2025 pm 03:09 PM

如何使用 Bootstrap 按鈕？引入 Bootstrap CSS創建按鈕元素並添加 Bootstrap 按鈕類添加按鈕文本

bootstrap怎麼調整大小 Apr 07, 2025 pm 03:18 PM

要調整 Bootstrap 中元素大小，可以使用尺寸類，具體包括：調整寬度：.col-、.w-、.mw-調整高度：.h-、.min-h-、.max-h-

bootstrap怎麼看日期 Apr 07, 2025 pm 03:03 PM

答案：可以使用 Bootstrap 的日期選擇器組件在頁面中查看日期。步驟：引入 Bootstrap 框架。在 HTML 中創建日期選擇器輸入框。 Bootstrap 將自動為選擇器添加樣式。使用 JavaScript 獲取選定的日期。

bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。

bootstrap怎麼寫分割線 Apr 07, 2025 pm 03:12 PM

創建 Bootstrap 分割線有兩種方法：使用標籤，可創建水平分割線。使用 CSS border 屬性，可創建自定義樣式的分割線。

bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。