App下載

HTML如何讓文字居中？附兩種方式

猿友 2021-03-11 16:02:56 瀏覽數(shù) (139676)
反饋

我們在編寫一個(gè)網(wǎng)頁時(shí)，經(jīng)常需要將文字居中。那么這篇文章小編教你HTML如何讓文字居中。

方法一、<p></p>標(biāo)簽和<h></h>居中

<p></p>標(biāo)簽和<h></h>標(biāo)簽中可以直接添加align="center"樣式，使文字居中。具體代碼如下：

<body>
	<p align="center">w3cschool--編程獅</p>
	<h1 align="center">w3cschool--編程獅</h1>
	<h2 align="center">w3cschool--編程獅</h2>
	<h6 align="center">w3cschool--編程獅</h6>
	
</body>

最終效果如下：

center

方法二、div內(nèi)文字居中

如果想要令 div 內(nèi)的文字居中顯示，則需要通過設(shè)置文字的行高進(jìn)行設(shè)置。具體代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>w3cschool - 編程獅，隨時(shí)隨地學(xué)編程</title>
	<style type="text/css">
		div{
			height: 200px;
			width:200px;
			background-color: #dea46b;
			text-align: center; 
			line-height: 200px;/*文字水平居中*/
			margin:auto;/*div水平居中*/
		}
	</style>
</head>
<body>
	<div class="box3">w3cschool--編程獅</div>
</body>
</html>

try

最終效果如下：

center1

以上就是HTML如何讓文字居中的全部內(nèi)容。更多HTML的學(xué)習(xí)請關(guān)注 W3Cschool 官網(wǎng)。


HTML 前端

3 人點(diǎn)贊