多个div水平排列并且居中

最新推荐文章于 2025-06-06 22:51:36 发布

原创最新推荐文章于 2025-06-06 22:51:36 发布 · 3w 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#水平排列 #居中 #div

本文介绍了一种使用CSS实现居中布局的方法，适用于现代浏览器（不包括IE7及更低版本）。通过设置外部容器的text-align:center属性和内部元素的display:inline-block属性来实现水平居中效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最直接想到的就是流式布局，这种不用在这里写了。

下面这种方法有两个关键点（IE7无效，再低更别想了）

text-align: center;

display: inline-block;

具体的代码在下面：

<style type="text/css">
	#div1{text-align: center;width: 800px;height: 40px;}
	.div2{display: inline-block;padding-left: 5px;padding-right: 5px;border: 1px solid;margin-left: 5px;margin-right: 5px;}
</style>
<div id="div1">
	<div class="div2">div2</div>
	<div class="div2">div2</div>
	<div class="div2">div2</div>
	<div class="div2">div2</div>
	<div class="div2">div2</div>
</div>