Question

快速提问，我有一个内置H1的DIV，现在，我希望将我的H1置于这个DIV中......

我尝试以下不起作用：

设置H1：

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

但是我尝试了这个并且确实有效，有人可以解释为什么上述不起作用吗？

设置H1：

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

Answer 1

您可以使用填充来获得紧密的边框，而无需将h1设置为内联（使用自动边距不能居中）。

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

Answer 2

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

内联级别元素包含在块级元素中，可以跨越多行，而不必定义矩形区域。根据内联元素w3c Visual formatting model的第10.3节：'width'属性不适用。 'margin-left'或'margin-right'的计算值'auto'成为'0'的使用值。

你不能将可能从一行中间开始并以另一行中间结尾的东西居中。

例如，你如何居中左侧的文字，这是粗体并跨越两行？

Answer 3

您是否尝试过“text-align：center”？

Answer 4

在DIV上使用“text-align：center”

Answer 5

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

保证金：自动; 对内联元素起作用，它与块级元素的效果不同。

（为了证明这一点：如果您采用内联元素，对其应用特定的保证金，然后对其应用自动保证金，其保证金将为零。）

Answer 6

我想你想在H1上加上“text-align：center”。请参阅this documentation。

此外，您可以删除左边距和右边距规则。

Answer 7

我不认为您的第一个解决方案有效，因为您将其设置为内联，并且只有块级元素可以被赋予自动边距IIRC。此外，如果不设置明确的宽度，自动边距技巧就不会太大。

Answer 8

试试这个

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

Answer 9

考虑到你声明你的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>

Answer 10

老兄，这很简单。就像上面说的那样。

只需将H1设置为填充0，而不是执行“margin-right：auto; margin-left：auto;”省去麻烦，并设置“margin：auto”以及设置的宽度。快捷方便。

标题中心<h1> </h1>

10 个答案: