垂直对齐是否可以防止文本断裂？

Question

每当我在 div 内对文本应用vertical-align:center 时，它就会停止关心 div 并延伸到无穷大，不受断字、自动换行和其他此类命令的影响。这只是垂直对齐的问题还是我在这里做错了什么？

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: red;
}

p {
  font-size: 14px;
  color: #000000;
}

.rectangle {
  box-sizing: border-box;
  width: 550px;
  height: 150px;
  padding: 0 40px 0 40px;
  word-break: normal;
}

#blue {
  background-color: #0000ff;
}

<div class="rectangle" id="blue" style="margin: 10px 10px;">
  <p style="vertical-align: center; line-height: 150px; word-wrap: normal; word-break: normal;">This text here is the problem child, it for some reason just bricks and decides its better than word-wrap or break, highly frustrating and costing me a lot of sanity.
  </p>
</div>

就像问题本身中所说的以及在代码中看到的那样，我尝试添加自动换行和断字以使文本自行更正，但无济于事，我想保持文本居中，但也以一种不居中的方式不断地逃离 div 并进入遗忘状态。

Answer 1

根据文档，

center

不是

vertical-align

的可能值之一。您可能想使用

text-align: center;