中心DIV内的H1标签

问题描述：

我有一个body标签内的以下DIV：中心DIV内的H1标签

<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; 
}

我怎么能垂直对齐和水平内H1 DIV？

AlertDiv会比上半年更大。

答

您可以添加到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

是的，这将是只有一条线。感谢您的回答。 – VansFannel 2011-06-06 16:07:17

这真的是唯一真正有效的答案：你使高度和行高相同，然后vertical-align CSS属性将起作用。经过高和低的搜索，这是所有这一切出现。 – Femi 2011-06-06 16:13:06

答

<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/

答

您可以添加填充到h1：

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

答

开始了的jsfiddlehere。

看起来水平对齐与text-align : center一起使用。仍然试图让垂直对齐工作;可能必须使用absolute定位和类似top: 50%或从顶部预先计算padding。

答

有使用变换了新的途径。将其应用于元素居中。它将集装箱高度减半，然后“修正”一半的高度。

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

它在大多数情况下都有效。我也有一个问题，即一个div是一个div在li。列表项目设置了高度，并且外部div组成3列（基础）。第二和第三列div包含图像，并且它们使用这种技术居中良好，但是第一列中的标题需要具有明确高度集的包装div。

现在，有没有人知道如果CSS人正在努力的方式来对齐的东西，很容易？看到2014年，甚至是我的一些朋友经常使用互联网，我想知道是否有人认为集中会是一个有用的样式功能。那么我们呢？

我使用这种技术在'text-align：center;'无法正常工作的情况下水平对齐某些元素。 '位置：相对; left：50％; transform：translateX（ - ??％）...'“??”必须根据元素的宽度来调整。我知道这有点哈克，但似乎在我迄今尝试过的屏幕上工作。 – whitebeard 2015-08-09 11:59:41

我发现使用'transform：translateX（ - ?? ??）'实际上，在各种屏幕尺寸下比'??％' – whitebeard 2015-08-11 01:44:11

更可靠完美，谢谢。 – MuriloKunze 2016-10-26 23:33:28

答

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

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

你可以在这里尝试一下： http://jsfiddle.net/KaXY5/424/

答

在HX标签

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

为什么自动向左/向右运行所需的宽度属性？ – brookr 2017-01-05 20:01:17

中心DIV内的H1标签

相关推荐