flexbox：两个垂直图标之间没有空格

Question

大家好，我有这种布局：

现在这是我尝试过的：

在<a href>和<img src...>中重置填充和边距

HTML容器

<div>
    <div className="percentage">
        {percentage}%
        <div className="buttonContainer">
            <HandlePercentageButton add onClick={() => this.handlePercentage('add')} />
                <HandlePercentageButton subtract onClick={() => this.handlePercentage('subtract')} />
        </div>
    </div>
    <span className="labelBudget">Budget allocato</span> 
</div>

HTML handlePercentageButton

<div>
    <a href="#" onClick={onClick}>
        {add ? <img src="https://image.flaticon.com/icons/svg/148/148790.svg" style={{ height: '15px' }} /> : null }
        {subtract ? <img src="https://image.flaticon.com/icons/svg/148/148791.svg" style={{ height: '15px' }} /> : null}
    </a>
</div>

这是我实际的CSS：

这是一张小卡片，并且主容器中有此CSS

.container {
    display: inline-flex;
    background-color: #FAFAFA;
    border-radius: 10px;
    padding: 10px;
    border: 1px solid #E5E4E4
}

在下方，我们找到了percentge（蓝色的大数字）

.percentage {
  display: flex;
  color: #33BBFF;
  font-size: 30px;
  font-weight: 700;
  padding-bottom: 5px;
}

我如何将两个按钮与百分比数字对齐并使它们  垂直无空间？

Answer 1

使用像这样的弹性布局：

<Container
  style={{
    display: 'flex',
    alignItems: 'center'
  }}>
  <LeftContainer>
    <Percentage />
  </LeftContainer>
  <RightContainer
    style={{
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center'
    }}>
    <Button type="inc" />
    <Button type="sub" />
  </RightContainer>
</Container>;