App下載

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

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

今天為大家?guī)黻P于html中基礎的相關問題“HTML中如何設置塊狀元素水平居中？”；對于這個問題呢小編為大家準備了一些相關的信息希望對大家有所幫助！

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

<html>

	<head>

		<meta charset="utf-8">

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

		<style type="text/css">

			div {

				border: 1px solid red;

				width: 350px;

				margin: 20px auto;

			}

		</style>

	</head>

	<body>

		<div id="">

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

		</div>

	</body>

</html>

運行結果：

定義寬度來設置水平居中

2、不定義寬度實現(xiàn)塊狀元素水平居中，我們在div標簽中添加了table標簽，在css樣式中使用table元素來設置我們的塊狀元素居中，代碼結果如下：


<html>
	<head>
		<meta charset="utf-8">
		<title>HTML中如何設置水平居中步驟方法</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>

結果如下：

不定義寬度水平居中

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

<html>
	<head>
		<meta charset="utf-8">
		<title>HTML中如何設置水平居中步驟方法</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>

結果如下：

不定義塊狀元素

總結：

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


HTML CSS

0 人點贊