Question

我写了这段代码，也可以在JSFiddle上找到：

* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Slab', serif;
  font-size: 18px;
  line-height: 1.6;
}

.wrapper {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  /* Not spacing to top and bottom and auto spacing to left and right*/
  padding: 0 20px;
}

div {
  margin: 10px;
  padding: 10px;
}

h1 {
  font-size: 36px;
  text-align: center;
}

h3,
p {
  max-width: 80ch;
  margin-left: auto;
  margin-right: auto;
}

h3 {
  font-weight: 400;
  font-size: 24px;
}

p {
  font-weight: 300;
  text-align: justify;
  text-justify: auto;
}

<div class="wrapper">
  <div>
    <h1>Welcome! <span>I'm glad you're here.</span></h1>
    <h3>My name is Andrés-J. Cremades, and I'm an Interaction/UI Designer.</h3>
    <p>Usability obsessed interaction designer. Building a UX Designer career founded on strong technological knowledge. Creative and perfectionist by nature with a particular interest in graphic design and HCI with proven working team skills.
    </p>
  </div>
</div>

而且我不理解为什么<p>和<h3>元素为什么在浏览器窗口完全展开时没有垂直对齐。

问题是，我将最大文本宽度设置为80个字符，然后将其居中放置，因为我首先写了这篇文章，并且有效：

p {
  font-weight: 300;
  max-width: 80ch;
  text-align: justify;
  text-justify: auto;
  margin-left: auto;
  margin-right: auto;
}

然后我希望<h3>元素与<p>的新位置垂直对齐，因此我修改了这样的代码：

h3, p {
  max-width: 80ch;
  margin-left: auto;
  margin-right: auto;
}

h3 {
  font-weight: 400;
  font-size: 24px;
}

p {
  font-weight: 300;
  text-align: justify;
  text-justify: auto;
}

我尝试为margin-left设置一个<h3>值，并且它起作用了。为什么margin-left和margin-right设置了auto而不像<h3>那样在<p>上工作？我在做什么错了？

Answer 1

当用户@FabioManzano和@benvc指出（请参阅问题下的注释）时，问题在于此声明：

max-width: 80ch;

80ch 是字体的相对长度，导致max-width的不同这些元素-影响您的margin-left: auto;和 margin-right:auto;个结果。 [@benvc]

我想将文字行的长度限制在80个字符以内，但是我不得不寻找另一种方式。

我从this article阅读了有关如何正确设置文本行长度限制的建议，并且我使用px代替了ch。现在它们已垂直对齐：

h3, p {
  max-width: 504px;
  margin-left: auto;
  margin-right: auto;
}

为什么这两个`<p>`和`</p> <h3>`元素不垂直对齐？

1 个答案: