居中一个标题<h1>

Question

快速问题，我有一个DIV里面嵌套了H1，现在我想把H1居中在这个DIV里面...

我尝试下面的方法但是不起作用：

设置H1：

display:inline
margin-left: auto ; 
margin-right: auto ;

但是我尝试了这个方法，它确实可行。有人可以解释一下为什么上述方法不起作用吗？

设置H1：

width: 35%;
margin-left: auto ; 
margin-right: auto ;

- seb

---

大家好，抱歉让你们感到困惑，但我忘记提到一件重要的事情，我意识到我可以使用TEXT-ALIGN:CENTER。但是这个H1周围有一个边框，所以如果我将其保留为BLOCK，则会在整个页面宽度上显示边框，但我认为通过使其成为INLINE，它将在H1周围具有漂亮的紧密边框，但是我无法使用MARGIN AUTO技巧将其居中...只是试图理解为什么。 - seb

编辑您的答案，而不是评论。 - Emil H

Answer 1

您可以使用padding来获得紧密的边框，而不必将h1设置为行内元素（这样无法使用自动边距居中）。

h1 {
    padding: 0;
    width: 35;
    margin-left: auto;
    margin-right: auto;
    // border: ...
}

- Emil H

---

Emil，谢谢你的回答，你能解释一下为什么内联元素不能使用自动边距居中吗？ - seb

Answer 2

一个块级元素在前后都有一个换行，因此它具有明确的开头和结尾。它是矩形的，并且可以定义宽度。

一个内联元素包含在块级元素中，可以跨越多行，不必定义矩形区域。根据w3c视觉格式模型第10.3节关于内联元素的规定：'width'属性无效。对于'margin-left'或'margin-right'的计算值为'auto'，则变为使用值'0'。

你不能将可能从一行中间开始并在另一行中间结束的内容居中。

例如，如何使粗体跨越两行的文本居中？

- Emily

Answer 3

你尝试过使用"text-align: center"吗？

- Coding With Style

Answer 4

在 DIV 上使用 "text-align:center"

- Chris.Jie

Answer 5

第一个不起作用是因为在行内元素上，自动边距为零。

margin: auto; 在行内元素上确实可以工作，但它的效果与块级元素不同。

（为了证明这一点：如果您取一个行内元素，给它应用一个特定的边距，然后再给它应用一个自动边距，它的边距将为零。）

- Sam DeFabbia-Kane

Answer 6

试一下这个

h1 {margin: 0pt auto; display: inline-block; min-width: 1%;}

- Ben Rowe

Answer 7

考虑到您需要为H1设置边框，但不希望它延伸到其父容器，我建议在DIV包装器和H1元素上使用样式组合（将以下内容粘贴以进行测试）：

<style type="text/css">
div.myHeadingClass {
    text-align: center;
    border: 1px solid #d7d7d7;
    padding: 15px;
}

div.myHeadingClass h1 {
    display: inline;
    padding: 10px;
    border: 1px solid red;
}
</style>

<div class="myHeadingClass">
<h1>My Big Ole Heading</h2>
</div>

- Steve Flook

Answer 8

我认为你想在H1上加上"text-align: center"。请参考this documentation。

另外，你可以删除margin-left和margin-right规则。

- aem

Answer 9

我认为你的第一个解决方案不起作用，因为你将其设置为内联，只有块级元素可以给予自动间距（如果我没记错的话）。此外，如果没有设置显式宽度，自动边距技巧也不太好用。

- alex

Answer 10

伙计，很简单。就像Seb上面说的那样。

将H1设置为padding 0，而不是使用“margin-right:auto;margin-left:auto;”麻烦事，直接使用“margin:auto”以及设置宽度即可。快速又简单。

- Juan