App下載

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

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

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

1、通過(guò)定義塊狀元素寬度和設(shè)置?margin: 20px  auto;?來(lái)實(shí)現(xiàn)居中（塊狀元素中的文字不會(huì)居中，如果要居中我們可以在div樣式設(shè)置中添加?text-align: center;?來(lái)實(shí)現(xiàn)塊狀元素水平居中，在代碼中我們使用內(nèi)聯(lián)式書(shū)寫(xiě)?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é)果：

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

2、不定義寬度實(shí)現(xiàn)塊狀元素水平居中，我們?cè)赿iv標(biāo)簽中添加了table標(biāo)簽，在css樣式中使用table元素來(lái)設(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、不定寬塊狀元素，通過(guò)改變塊級(jí)元素的 ?display ?為 ?inline ?類型，然后使用? text-align:center? 來(lái)實(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è)問(wèn)題的相關(guān)內(nèi)容，當(dāng)然如果你有更好的方法或者疑問(wèn)可以提出來(lái)和大家一同探討。更多相關(guān)html知識(shí)內(nèi)容我們可以在 Html 教程中學(xué)習(xí)和了解。


HTML CSS

0 人點(diǎn)贊