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

Question

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

HTML

<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>

CSS

* {
    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 并进入遗忘状态。

Answer 1

根据文档，

center

不是

vertical-align

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

text-align: center;