溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了HTML中怎么設置塊狀元素水平居中的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇HTML中怎么設置塊狀元素水平居中文章都會有所收獲，下面我們一起來看看吧。
1、通過定義塊狀元素寬度和設置margin: 20px auto;來實現居中（塊狀元素中的文字不會居中，如果要居中我們可以在div樣式設置中添加text-align: center;來實現塊狀元素水平居中，在代碼中我們使用內聯式書寫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、不定義寬度實現塊狀元素水平居中，我們在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 來實現居中；代碼結果如下：
<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中怎么設置塊狀元素水平居中”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“HTML中怎么設置塊狀元素水平居中”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
