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

【问题标题】：flexbox: No space between two vertical iconsflexbox：两个垂直图标之间没有空格
【发布时间】：2019-05-29 09:38:29
【问题描述】：

大家好，我有这个布局：

现在这是我尝试过的：

在<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 句柄百分比按钮

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

下面是百分比（蓝色的大数字）

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

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

【问题讨论】：

标签： html css reactjs flexbox

【解决方案1】：

像这样使用 flex 布局：

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

【讨论】：