html的container怎么居中,html – 如何居中对齐flexbox容器?

本文介绍了一种在不使用填充的情况下将Flex容器居中于页面的方法,并解决了子元素左对齐的问题。通过调整CSS属性实现响应式网格布局。

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

参见英文答案 >

How to center a flex container but left-align flex items                                    1个

我在代码段显示时成功创建了一个响应式网格.

此刻,我看到盒子左边对齐了.

如何在不使用填充的情况下将容器放在页面的中心?

我尝试使用margin:auto但它没有用.

.container{

display:flex;

flex-wrap:wrap;

text-align:center;

margin:auto;

}

.box{

width:100%;

max-width:30%;

border:1px solid red;

margin:5px;

}

@media only screen and ( max-width:768px ){

.box{

width:100%;

max-width:40%;

border:1px solid red;

}

}

This is the first box

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci voluptates, aut totam eaque possimus molestiae atque odio vero optio porro magni, quis culpa ea. Perferendis, neque, enim. Rem, quia, quisquam.

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值