32

我尝试将我的 h1 居中在 body 标签中，如下所示：

h1 {margin:0 auto}

http://jsfiddle.net/qPDwY/

但它不居中。我如何解决它？

4

6 回答 6

54

在这种情况下：

h1 {
    text-align:center;
}

jsFiddle 示例

当您在元素上设置宽度时使用 margin:auto 规则，但您还没有这样做。

于 2014-01-10T18:22:51.610 回答
3

您可以通过设置宽度将其居中。

<body>
     <h1>My Title</h1>

</body>

CSS

h1 {
    width:500px;
    margin: 0 auto;
    background: gray;
    text-align: center;
}
于 2014-01-10T18:26:58.287 回答
2

text-align: center是最好的选择，但如果你仍然想使用它来居中，你已经为（一个块）元素margin: 0 auto分配了一些宽度。H1

您可以通过将margin-left 和margin-right 设为auto 来使块级元素居中（并且它具有设定的宽度，否则它将是全宽并且不需要 centering）。这通常用这样的速记来完成：

.center-me {
  margin: 0 auto;
}

来源： https ://css-tricks.com/centering-css-complete-guide/#horizo​​ntal-block

于 2021-06-02T09:51:09.027 回答
0

或者，你可以试试这个：

h1 {
    text-align: center;
    margin: 0px auto;
    display; block;
}
于 2014-01-10T18:26:41.893 回答
0

-div style="margin:0 auto; text-align:left; width:80px;"- 示例

改变宽度改变位置

于 2014-01-10T19:13:16.623 回答
0

j09691所说的确实有效，但并非一直有效。

这就是我使用的原因：

/* Put this inside element/class. */
transform: translateX(400px);

如果它不适合您的屏幕中央，只需调整它。当然，您可以使用一些 css 和/或 js 魔法来自动调整它。

于 2021-05-14T05:31:25.457 回答