Question

我想在页面上居中<h1>或<div class="heading">。我找到的唯一解决方案是

body { text-align: center; }

但我无法弄清楚为什么这段代码不起作用。使用Display: inline-block因为我希望边框环绕我的。

＆＃13;

body {
  margin: 0;
}

.navbar {
  text-align: right;
  background: black;
  color: white;
  padding: 10px;
}

ul {
  list-style-type: none;
  padding: 5px;
}

li {
  display: inline-block;
}

.heading {
  border: 2px solid black;
  display: inline-block;
  text-align: center;
}

＆＃13;

<header>
  <nav class="navbar">
    <ul>
      <li>home</li>
      <li>about</li>
      <li>contact</li>
    </ul>
  </nav>
  <div class="heading">
    <h1>heading</h1>
  </div>
</header>

＆＃13;

Answer 1

添加：

.heading {
  text-align: center; 
}

...并从display: inline-block删除.heading。相反，添加此

.heading h1 {
  display: inline-block;
}

.heading是h1的容器。默认情况下两者都是100％宽。这会将内联块h1置于全宽.heading

内

Answer 2

您正在寻找的秘密是使用block级元素，并设置margin: 0 auto。这告诉块集中，就像标准text-align: center。

.header {
  display: block;
  margin: 0 auto;
}

默认情况下，block - 级别元素占据其容器宽度的100％，因此您可能还需要指定标题的宽度。或者，您可以通过添加在inline-block中设置的容器div并将边框移动到那里来自动调整标题以适应文本的大小：

body {
  margin: 0;
}

.navbar {
  text-align: right;
  background: black;
  color: white;
  padding: 10px;
}

ul {
  list-style-type: none;
  padding: 5px;
}

li {
  display: inline-block;
}

.heading {
  display: block;
  margin: 0 auto;
  text-align: center;
}

.heading-wrapper {
  display: inline-block;
  border: 2px solid black;
  padding: 0 10px;
}

<header>
  <nav class="navbar">
    <ul>
      <li>home</li>
      <li>about</li>
      <li>contact</li>
    </ul>
  </nav>
  <div class="heading">
    <div class="heading-wrapper">
      <h1>heading</h1>
    </div>

  </div>
</header>

这样，无论文本多少，标题都会保持集中，边框会自动正确展开以适应标题。

希望这有帮助！：）

Answer 3

div默认显示块，所以如果你想显示它，那么声明它是非常重要的。

然而，再次，正如我之前看到的另一篇文章，你没有css包含父母header，这会对你有很大的帮助。您应该将任何保证金应用于此，并且不需要为您的div应用较小的宽度。

＆＃13;

body {
margin: 0;
}

header{margin: 0 auto;}

.navbar {
text-align: right;
background: black;
color: white;
padding: 10px;
}

ul {
list-style-type: none;
padding: 5px;
}

li {
display: inline-block;
}

.heading {
border: 2px solid black;
/*display: block; - even if you leave this out, it will display as block*/
text-align: center;
}

＆＃13;

<header>
  <nav class="navbar">
    <ul>
      <li>home</li>
      <li>about</li>
      <li>contact</li>
    </ul>
 </nav>
 <div class="heading">
   <h1>heading</h1>
 </div>
</header>

＆＃13;

Answer 4

您可以在父元素上使用display: flex; justify-content;来居中。这是一个关于中心事物https://www.w3.org/Style/Examples/007/center.en.html

的绝佳资源

body {
  margin: 0;
}

.navbar {
  text-align: right;
  background: black;
  color: white;
  padding: 10px;
}

ul {
  list-style-type: none;
  padding: 5px;
}

li {
  display: inline-block;
}

.heading {
  display: flex;
  justify-content: center;
}

<header>
  <nav class="navbar">
    <ul>
      <li>home</li>
      <li>about</li>
      <li>contact</li>
    </ul>
  </nav>
  <div class="heading">
    <h1>heading</h1>
  </div>
</header>

如何在页面中心对齐标题<h1>

4 个答案: