【问题标题】:How do I center an h1 in the body我如何在身体中居中一个 h1
【发布时间】:2014-01-10 18:21:43
【问题描述】:

我尝试将我的 h1 放在 body 标记中,如下所示:

h1 {margin:0 auto}

http://jsfiddle.net/qPDwY/

但它没有居中。我该如何解决?

【问题讨论】:

  • 使用 text-align:center... jsfiddle.net/9bSnT .. h1 是一个宽度为 100% 的块级元素。margin:0 auto 在这种情况下不起作用。跨度>
  • text-align: center? h1 默认为 100% 宽度。
  • 保证金:0自动;以固定或 100% 的宽度工作。你也可以使用 text-align: center;但这只会再次起作用,只要您网站上的宽度设置为 100% 或固定并自行居中。您应该注意的另一件事是使用 text-align: center;将全部居中,除非您特别指向特定的嵌套 h1,如此处 .yourclass h1 {text-align: center}

标签: css html-heading


【解决方案1】:

在这种情况下:

h1 {
    text-align:center;
}

jsFiddle example

margin:auto 规则用于在元素上设置宽度时使用,但您尚未这样做。

【讨论】:

    【解决方案2】:

    text-align: center 是最佳选择,但如果您仍想使用margin: 0 auto 将其居中,您必须为H1(块)元素分配一些宽度。

    你可以通过给它margin-left和 auto 的 margin-right (并且 它有一个固定的宽度,否则它会是 全宽,不需要居中)。这通常是用 像这样的速记:

    .center-me {
      margin: 0 auto;
    }
    

    来源: https://css-tricks.com/centering-css-complete-guide/#horizontal-block

    【讨论】:

      【解决方案3】:

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

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

      CSS

      h1 {
          width:500px;
          margin: 0 auto;
          background: gray;
          text-align: center;
      }
      

      【讨论】:

        【解决方案4】:

        或者,你可以试试这个:

        h1 {
            text-align: center;
            margin: 0px auto;
            display; block;
        }
        

        【讨论】:

        • 默认情况下,h1 是块级元素,没有宽度,margin:0 auto 什么都不做。
        【解决方案5】:

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

        改变宽度改变位置

        【讨论】:

          【解决方案6】:

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

          这就是我使用的原因:

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

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

          【讨论】:

            猜你喜欢
            • 2018-06-06
            • 1970-01-01
            • 2012-09-30
            • 2014-01-01
            • 2016-03-17
            • 1970-01-01
            • 2017-07-16
            • 1970-01-01
            • 2011-09-09
            相关资源
            最近更新 更多