这篇文章主要介绍了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进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
