多个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>

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值