Question

我有一个场景，我有一个复杂的Web应用程序，它使用了很多CSS / JS框架/库，并且我的一个页面上的<div>无法正确呈现。

这是我的代码段，但遗憾的是，由于涉及众多JS / CSS框架，我无法提供完整的代码示例：

<body>
    <div style="margin: 0 auto;" id="centerme">
        <h1 style="margin: 0 auto;">You'll need an invitation to access<br/>retailer connection setups</h1>

        <div style="margin: 0 auto;" class="well">
            <h2>How can I get such wow?</h2>
            <h3>
                It looks like you need much amaze.
            </h3>
        </div>

        <h3>For reals? Rejoice!</h3>
    </div>
</body>

因此，我尝试做的是将centerme div中的所有内容水平居中。目前上述尝试并不起作用，但根据CSS Tricks，我只需要将以下样式应用于我的div：

.centerme {
    margin: 0 auto;
}

现在我的理解我应用于任何HTML元素的任何style属性将始终优先于管理该元素的其他样式/规则，是吗？！？那么为什么不在我的代码中占优势呢？

换句话说：我可以设置哪些style属性会强制浏览器将div放在中心位置，无论其他规则是什么？

Answer 1

您的div需要有一个已定义的宽度才能使自动边距生效：

设置宽度：

#centerme {
    margin: 0 auto;
    width: 500px;
}

Answer 2

如果要将动态宽度元素居中，可以：

.centerme {
  display: table; /*shrink-to-fit*/
  margin: 0 auto;
}

<div class="centerme">yes</div>

或：

.container {
  text-align: center;
}
.container .centerme {
  text-align: left; /*reset if necessary*/
  display: inline-block;
}

<div class="container">
  <div class="centerme">yes</div>
</div>

Answer 3

您的选择器是ID <div style="margin: 0 auto;" id="centerme">

但你指的是一个班级.centerme {}

您必须使用#来指定ID #centerme {}

同样#centerme必须有定义的width

示例：

#centerme { width: 90%; margin: 0 auto; }

强制CSS样式属性到页面上的中心元素

3 个答案: