【问题标题】:Center a H1 tag inside a DIV在 DIV 中居中放置 H1 标签
【发布时间】:2011-09-09 10:24:12
【问题描述】:

我在 body 标签中有以下 DIV:

<div id="AlertDiv"><h1>Yes</h1></div>

这些是它们的 CSS 类:

#AlertDiv {
    position:absolute;
    height: 51px;
    left: 365px;
    top: 198px;
    width: 62px;
    background-color:black;
    color:white;
}

#AlertDiv h1{
    margin:auto;
    vertical-align:middle;
}

如何在 DIV 内垂直和水平对齐 H1?

AlertDiv 将大于 H1。

【问题讨论】:

    标签: css vertical-alignment alignment


    【解决方案1】:

    您可以向h1 添加填充:

    #AlertDiv h1 {
      padding:15px 18px;
    }
    

    【讨论】:

      【解决方案2】:

      在 hX 标签上

      width: 100px;
      margin-left: auto;
      margin-right: auto;
      

      【讨论】:

      • 为什么自动左/右工作需要width属性?
      • 在我的情况下,只需添加宽度,因为文本已经居中对齐,它起作用了!谢谢 非常简单的答案,适用于大多数情况。
      【解决方案3】:

      您可以使用 display: table-cell 将 div 呈现为表格单元格,然后像在普通表格单元格中一样使用 vertical-align

      #AlertDiv {
          display: table-cell;
          vertical-align: middle;
          text-align: center;
      }
      

      你可以在这里试试: http://jsfiddle.net/KaXY5/424/

      【讨论】:

        【解决方案4】:

        有一种使用变换的新方法。将此应用于中心的元素。它将容器高度的一半向下移动,然后将元素高度的一半“校正”。

        position: relative;
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        

        它大部分时间都有效。我确实遇到了divdivli 中的问题。列表项设置了高度,外部 divs 由 3 列(基础)组成。第 2 列和第 3 列 div 包含图像,并且使用这种技术可以很好地居中,但是第一列中的标题需要一个具有明确高度设置的包装 div。

        现在,有谁知道 CSS 人员是否正在研究一种可以轻松对齐内容的方法?看到 2014 年,甚至我的一些朋友经常使用互联网,我想知道是否有人认为居中会是一个有用的样式功能。那么只有我们吗?

        【讨论】:

        • text-align:center; 无法正常工作的情况下,我使用这种技术水平对齐一些元素。 position:relative; left:50%;transform:translateX(-??%)...“??”必须根据元素的宽度进行调整。我知道这有点 hacky,但似乎可以在我迄今为止尝试过的屏幕上工作。
        • 我发现使用transform:translateX(-??em)实际上在各种屏幕尺寸上都比??%更可靠
        • 除此之外 - Google Chrome 开发团队关于居中的新视频非常酷youtube.com/watch?v=ncYzTvEMCyE
        【解决方案5】:

        如果您知道 line-height:51px#AlertDiv h1 将永远只有一行,则可以添加它。还要将text-align:center 添加到#AlertDiv

        #AlertDiv {
            top:198px;
            left:365px;
            width:62px;
            height:51px;
            color:white;
            position:absolute;
            text-align:center;
            background-color:black;
        }
        
        #AlertDiv h1 {
            margin:auto;
            line-height:51px;
            vertical-align:middle;
        }
        

        下面的演示还使用负边距来保持#AlertDiv 在两个轴上居中,即使在调整窗口大小时也是如此。

        演示:jsfiddle.net/KaXY5

        【讨论】:

        • 是的,只有一行。谢谢你的回答。
        • 这确实是唯一真正有效的答案:您将高度和行高设置为相同,然后垂直对齐 CSS 属性将起作用。在高低搜索之后,这就是全部。
        【解决方案6】:

        开始了 jsFiddle here

        似乎水平对齐适用于text-align : center。仍在尝试使垂直对齐起作用;可能必须使用absolute 定位和类似top: 50% 或从顶部预先计算的padding

        【讨论】:

          【解决方案7】:
          <div id="AlertDiv" style="width:600px;height:400px;border:SOLID 1px;">
              <h1 style="width:100%;height:10%;text-align:center;position:relative;top:40%;">Yes</h1>
          </div>
          

          你可以试试这里的代码:

          http://htmledit.squarefree.com/

          【讨论】:

            猜你喜欢
            • 2018-06-06
            • 1970-01-01
            • 1970-01-01
            • 2017-07-16
            • 1970-01-01
            • 2014-01-01
            • 1970-01-01
            • 2013-07-09
            • 1970-01-01
            相关资源
            最近更新 更多