margin: 0px auto; 不居中 div [重复]

Posted 2023-03-06

【中文标题】margin: 0px auto; 不居中 div [重复]

【英文标题】：margin: 0px auto; not centering div [duplicate]margin: 0px auto; 不居中 div [重复]

【发布时间】：2018-09-04 02:38:12

【问题描述】：

请看https://jsfiddle.net/p1ys5yj3/1/

我试图用margin: 0px auto; 将红色.question 点在页面中心居中，但它不起作用。

margin-left: 似乎可以工作，但我不确定为什么margin: 0px auto 不工作。

我试过了

text-align 删除.question float: answer; 和.question display: block;

【问题讨论】：

您在content div 上设置了一个max-width 600px。您的 question 课程居中...您永远看不到它。

除非您想支持旧版浏览器，否则我强烈建议您使用Flexbox for all of this, it makes things like this much simpler。

【参考方案1】：

从.content 中删除max-width 并添加text-align: center;。希望这是你想要的。

【参考方案2】：

请通过removing修改.content类中的CSS

填充：30px 自动

和添加

边距：30px 自动

然后删除

最大宽度

来自 .question 类和 add

宽度：100%

我认为这应该可以解决您的问题。

【参考方案3】：

更新你的CSS，

.content 
 text-align: center;

.question 
 text-align: center;
 position: static;
 top: 40px;
 border: 1px dotted red;
 display: inline-block;
 box-sizing: content-box;
 width: 800px;
 margin: 0px auto;
 padding: 30px;

.answer 
 margin: 20px;
 text-align: center;
 display: inline-block;