css – 将H1标记居中在DIV中

前端之家收集整理的这篇文章主要介绍了css – 将H1标记居中在DIV中前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在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。

解决方法

你可以添加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相关文章