css - 多行文本导致 div 容器被下推

Question

我有一个按钮组件，它基本上是一个按钮和该按钮下方的文本。两者共享同一个容器。 当文本(按钮下方，而不是按钮内部)为多行时，按钮被按下，导致奇怪的对齐问题

我试图将外部的“文本”css 类分离到另一个单独的 div，但没有成功。我还尝试给父级“垂直对齐:顶部”(因为我在某处读到问题可能是由于文本将父级的垂直对齐:基线向下推而引起的。它没有任何区别，也没有修复我的问题

.container {
  display: inline-block;
  width: 56px;
  height: 56px;
  .button {
    display: flex;
    justify-content: center;
    width: 56px;
    height: 56px;
    cursor: pointer;
    .icon {
      width: 24px;
      height: 24px;
    }
  }
  .text {
    font-size: 13px; 
    text-align: center; 
    text-transform: capitalize;
  }
}

relevant jsx (react):
<div className='container'>
  <div>
    <button className='button' style={buttonColors}>
    <div className='icon'/>
    </button>
  </div>
  <div className='text'> {text} </div>
  </div>
    );

预期结果:只要有多行文本，文本就会继续向下，而不是按下按钮。

Answer 1

将 vertical-align:top 添加到 button-container 确实解决了这个问题。我的错误是把它放在另一个地方。 这样，多行文本不会导致来自垂直对齐的父“基线”:默认的基线被下推