App下載

HTML中如何設(shè)置塊狀元素水平居中?設(shè)置塊狀元素水平居中的方法步驟!

猿友 2021-06-18 11:04:53 瀏覽數(shù) (4630)
反饋

今天為大家?guī)黻P(guān)于html中基礎(chǔ)的相關(guān)問題“HTML中如何設(shè)置塊狀元素水平居中?”;對于這個(gè)問題呢小編為大家準(zhǔn)備了一些相關(guān)的信息希望對大家有所幫助!


1、通過定義塊狀元素寬度和設(shè)置?margin: 20px  auto;?來實(shí)現(xiàn)居中(塊狀元素中的文字不會(huì)居中,如果要居中我們可以在div樣式設(shè)置中添加?text-align: center;?來實(shí)現(xiàn)塊狀元素水平居中,在代碼中我們使用內(nèi)聯(lián)式書寫?css?樣式)代碼結(jié)果如下:

<html>

<head>

<meta charset="utf-8">

<title>HTML中如何設(shè)置水平居中步驟方法</title>

<style type="text/css">

div {

border: 1px solid red;

width: 350px;

margin: 20px auto;

}

</style>

</head>

<body>

<div id="">

定義寬度的塊狀元素水平居中

</div>

</body>

</html>

運(yùn)行結(jié)果:

定義寬度來設(shè)置水平居中


2、不定義寬度實(shí)現(xiàn)塊狀元素水平居中,我們在div標(biāo)簽中添加了table標(biāo)簽,在css樣式中使用table元素來設(shè)置我們的塊狀元素居中,代碼結(jié)果如下:


<html>
	<head>
		<meta charset="utf-8">
		<title>HTML中如何設(shè)置水平居中步驟方法</title>
		<style type="text/css">
			table {
				border: solid 1px;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div id="">
			<table>
				<tbody>
					<tr>
						<td>
							<ul>
								<li>第一段文本</li>
								<li>第二段文本</li>
								<li>第三段文本</li>
							</ul>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>
</html>

結(jié)果如下:

不定義寬度水平居中


3、不定寬塊狀元素,通過改變塊級元素的 ?display ?為 ?inline ?類型,然后使用? text-align:center? 來實(shí)現(xiàn)居中;代碼結(jié)果如下:

<html>
	<head>
		<meta charset="utf-8">
		<title>HTML中如何設(shè)置水平居中步驟方法</title>
		<style type="text/css">
			#center {
				text-align: center;
			}
			#center ul {
				list-style: none;
				margin: 0;
				padding: 0;
				display: inline;
			}
			#center li {
				margin-right: 8px;
				display: inline;
			}
		</style>
	</head>
	<body>
		<div id="center">
			<ul>
				<li><a href="#">W3cschool</a></li>
			</ul>
			<ul>
				<li>W3cschool</li>
			</ul>
		</div>
	</body>
</html>

結(jié)果如下:

不定義塊狀元素


總結(jié):

以上就是有關(guān)于:“HTML中如何設(shè)置塊狀元素水平居中”這個(gè)問題的相關(guān)內(nèi)容,當(dāng)然如果你有更好的方法或者疑問可以提出來和大家一同探討。更多相關(guān)html知識(shí)內(nèi)容我們可以在 Html 教程中學(xué)習(xí)和了解。


0 人點(diǎn)贊