垂直對齊div內的兩行文本

Question

在這篇文章之前，我閱讀了幾篇關於這個主題的文章，我已經知道一些垂直對齊的使用技巧——單行文本的行高、幾個 div 的 display:table 和 CSS3 中的 Flexbox。 但我仍然需要幫助來對齊 div 內的兩行：

 .keys { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; min-height: 70vh; } .key { border: 0.1rem solid white; margin: 1rem; width: 5rem; height: 5rem; padding: 0.5rem 0; text-align: center; color: white; } kbd { display: block; }

 <div class="keys"> <div class="key" data-key="65"><kbd>A</kbd><span class="sound">text</span></div> <div class="key" data-key="83"><kbd>S</kbd><span class="sound">text</span></div> <div class="key" data-key="68"><kbd>D</kbd><span class="sound">text</span></div> <div class="key" data-key="70"><kbd>F</kbd><span class="sound">text</span></div> </div>

如您所見，我已經有了一個 flexbox 容器，要使用 display:table 需要一個額外的 div。 也許玩填充或一些相對定位將是答案。 垂直居中此文本內容的最佳方法是什么？

Answer 1

評論后更改答案：

將此添加到.key也使其成為一個 flex 容器，它的內容彼此居中（已經存在的text-align: center執行水平文本居中）：

display: flex;
flex-direction: column;
justify-content: center;

（注意：由於一切都是白色的，因此保持不可見，我在.key元素中添加了黑色背景）

 .keys { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; min-height: 70vh; } .key { display: flex; flex-direction: column; justify-content: center; border: 0.1rem solid white; margin: 1rem; width: 5rem; height: 5rem; padding: 0.5rem 0; text-align: center; color: white; background: black; } kbd { }

 <div class="keys"> <div class="key" data-key="65"><kbd>A</kbd><span class="sound">text</span></div> <div class="key" data-key="83"><kbd>S</kbd><span class="sound">text</span></div> <div class="key" data-key="68"><kbd>D</kbd><span class="sound">text</span></div> <div class="key" data-key="70"><kbd>F</kbd><span class="sound">text</span></div> </div>