将

居中
内的标签

发布于 2024-11-14 06:23:19 字数 570 浏览 3 评论 0原文

我在标签内有以下

：

<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> 位于

内？

AlertDiv 将大于

。

原文

I have the following <div> inside a <body> tag:

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

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

How can I vertically and horizontally align an <h1> inside of a <div>?

AlertDiv will be bigger than <h1>.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

少女净妖师 2024-11-21 06:23:19

如果您知道 line-height:51px 只会是一行，则可以将 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

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

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

Demo: jsfiddle.net/KaXY5

回复收藏 0 原文

美羊羊 2024-11-21 06:23:19

在 hX 标签上

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

On the hX tag

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

回复收藏 0 原文

半窗疏影 2024-11-21 06:23:19

有一种使用变换的新方法。将其应用于居中的元素。它将容器高度向下微移一半，然后“纠正”元素高度的一半。

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

大多数时候它都有效。我确实遇到了一个问题，div 位于 li 的 div 中。列表项设置了高度，外部 div 组成 3 列（基础）。第二列和第三列 div 包含图像，并且使用这种技术可以很好地居中，但是第一列中的标题需要一个具有明确高度设置的包装 div。

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

There is a new way using transforms. Apply this to the element to centre. It nudges down by half the container height and then 'corrects' by half the element height.

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

It works most of the time. I did have a problem where a div was in a div in a li. The list item had a height set and the outer divs made up 3 columns (Foundation). The 2nd and 3rd column divs contained images, and they centered just fine with this technique, however the heading in the first column needed a wrapping div with an explicit height set.

Now, does anyone know if the CSS people are working on a way to align stuff, like, easily? Seeing that its 2014 and even some of my friends are regularly using the internet, I wondered if anyone had considered that centering would be a useful styling feature yet. Just us then?

回复收藏 0 原文

只为一人 2024-11-21 06:23:19

在此处启动了jsFiddle。

看起来水平对齐与text-align：center一起使用。仍在尝试让垂直对齐工作；可能必须使用 absolute 定位和 top: 50% 或从顶部开始预先计算的 padding 。

回复收藏 0 原文

述情 2024-11-21 06:23:19

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

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

You can try the code here:

http://htmledit.squarefree.com/

回复收藏 0 原文

怎言笑 2024-11-21 06:23:19

您可以向 h1 添加填充：

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

You could add padding to the h1:

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

回复收藏 0 原文

相思碎 2024-11-21 06:23:19

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

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

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

You can use display: table-cell in order to render the div as a table cell and then use vertical-align like you would do in a normal table cell.

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

You can try it here:
http://jsfiddle.net/KaXY5/424/

回复收藏 0 原文

余生共白头 2024-11-21 06:23:19

如何在
内垂直和水平对齐
？

text-align: center; 自 2024 年起水平居中 h1 文本
（请参阅“如何垂直居中 < code>H1 in a div?"), align-content: center; 将在 div? 中对齐 h1 div。

请参阅 jsfiddle 和下面的代码片段：

#AlertDiv {
position:absolute;
height: 71px;
left: 365px;
top: 98px;
width: 92px;
background-color:black;
color:white;
align-content: center; /* vertical centering*/
text-align: center;
}

#AlertDiv h1{
margin:auto;
}

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

How can I vertically and horizontally align an <h1> inside a <div>?

text-align: center; does horizontally center h1 text
since 2024 (see "How do I vertically center an H1 in a div?"), align-content: center; will align h1 inside the div.

See jsfiddle and this snippet below:

#AlertDiv {
position:absolute;
height: 71px;
left: 365px;
top: 98px;
width: 92px;
background-color:black;
color:white;
align-content: center; /* vertical centering*/
text-align: center;
}

#AlertDiv h1{
margin:auto;
}