今天為大家?guī)黻P(guān)于html中基礎(chǔ)的相關(guān)問題“HTML中如何設(shè)置塊狀元素水平居中？”；對(duì)于這個(gè)問題呢小編為大家準(zhǔn)備了一些相關(guān)的信息希望對(duì)大家有所幫助！
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é)果：
2、不定義寬度實(shí)現(xiàn)塊狀元素水平居中，我們?cè)赿iv標(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、不定寬塊狀元素，通過改變塊級(jí)元素的 ?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í)和了解。
