App下載

在html中怎么設(shè)置居中？居中的方法有幾種？

猿友 2021-05-31 14:57:45 瀏覽數(shù) (19416)
反饋

在我們?cè)陂_發(fā)的時(shí)候難免會(huì)遇到各種各樣的問題，那么今天我們來看看在html中怎么設(shè)置居中這個(gè)問題，以下是我為大家找到的居中的方法和設(shè)置的一些方法，快來看看吧！

方法一：
text-align：center；用法：

首先我們創(chuàng)建一個(gè)文件后呢，輸入一個(gè) ?div? 標(biāo)簽和 ?span? 標(biāo)簽，然后在各自的標(biāo)簽中加入一個(gè)類選擇器，在使用內(nèi)聯(lián)式書寫我們的 CSS 樣式，截圖代碼如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>居中設(shè)置方法</title>
		<style>
			.center-box{
				text-align: center;
			}
			.baincheng-sp{
				display: inline-block;
				width: 500px;
			}
		</style>
	</head>
	<body>
		<div class="center-box">
			<span class="baincheng-sp">
				W3cschool，編程獅在線即可免費(fèi)學(xué)習(xí)。
			</span>
		</div>
	</body>
</html>


在這個(gè)代碼和截圖中我們就可以清楚地看到字體居中了，如果沒有添加 CSS樣式的話，那么字體一般是默認(rèn)靠左的。

方法二：
margin: 0 auto;用法：

這個(gè)方法在我們使用的時(shí)候是不可以使用其他的定位方式例如：相對(duì)定位或者獨(dú)特定位。對(duì)于這些定位不了解的小伙伴可以在w3cschool中進(jìn)行一個(gè)系統(tǒng)的學(xué)習(xí)和了解。而且這個(gè)方法也要求內(nèi)部的元素是要塊級(jí)元素，接下來我們來看下代碼和截圖吧！如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>居中設(shè)置方法</title>
		<style>
			.center-box{
				text-align: center;
			}
			.baincheng-sp{
				display: block;  margin: 0 auto;
				
			}
		</style>
	</head>
	<body>
		<div class="center-box" >
			<span class="baincheng-sp">
				W3cschool，編程獅在線即可免費(fèi)學(xué)習(xí)。
			</span>
		</div>
	</body>
</html>


我們依舊是先看我們的代碼和運(yùn)行的截圖，都可以體現(xiàn)出來文字已經(jīng)居中了。

小結(jié)：

以上就是今天的一個(gè)有關(guān)于在html中怎么設(shè)置居中的方法的分享，當(dāng)然如果你有更好的方法也可以分享給小編大家一起學(xué)習(xí)一下噢！這里小編也為大家?guī)硪粋€(gè)免費(fèi)的HTML基礎(chǔ)入門的一個(gè)學(xué)習(xí)平臺(tái)，大家可以在里面觀看免費(fèi)視頻學(xué)習(xí)噢！


HTML CSS 編程基礎(chǔ)

0 人點(diǎn)贊