中心H1标签内的一个DIV [英] Center a H1 tag inside a DIV

问题描述

我已经在体标记以下DIV：

I have the following DIV inside a body tag:

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

和这些是他们的CSS类：

And these are their CSS classes:

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

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

我怎样才能调整垂直和水平方向H1内部DIV？

How can I align vertically and horizontally H1 inside DIV?

AlertDiv 将大于上半年。

推荐答案

您可以添加的line-height：51px 到 #AlertDiv H1 如果你知道它永远只能将是一条线。另外补充文本对齐：中心到 #AlertDiv

You can add line-height:51px to #AlertDiv h1 if you know it's only ever going to be one line. Also add text-align:center to #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 为中心的两个轴线上，即使调整窗口的大小。

The demo below also uses negative margins to keep the #AlertDiv centered on both axis, even when the window is resized.

演示： jsfiddle.net/KaXY5

Demo: jsfiddle.net/KaXY5

这篇关于中心H1标签内的一个DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！