Question

我有一个按钮组件，它基本上是一个按钮，并且在该按钮下面有一个文本。两者共享同一个容器。当文本（位于按钮下方而不是内部）多行时，按钮被按下，从而导致奇怪的对齐问题

我试图将'text'css类分离到另一个单独的div上，但这没有用。我还尝试给父对象“ vertical-align：top”（因为我读过某个地方，该问题可能是由于文本将父对象的vertical-align：基线降低了。这没有任何区别，也没有解决。我的问题

.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添加到按钮容器确实解决了该问题。我的错误是把它放到另一个地方。这样，多行文本不会导致垂直对齐的父“基线”：默认情况下的基线被压低

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

1 个答案: