对齐导航栏项目，徽标和图像

Question

所以我有一个导航栏，目前看起来像这样：

我正在尝试更改“信息”图标的位置，以使它们比现在稍微低一点。理想情况是向下多3-5像素。

如果我尝试添加类似“ margin-top：5px”的文字，它也会随之出现，而不是解决我的问题。

这是我的代码：

反应渲染：

        <div className="toolbar">
          <div className = "menu">
          <img className = "logo" src={logo} alt="logo"onClick={refreshPage}/>
            <a className = "buttons" id = "firstOne" onClick={() => this.handleClick("bubbleSort")}> Bubble Sort</a>
            <info className = "info" alt="info"/>
            <a className = "buttons" onClick={() => this.handleClick("selectionSort")}> Selection Sort </a>
            <info className = "info" alt="info"/>
            <a className = "buttons" onClick={() => this.handleClick("insertionSort")}> Insertion Sort </a>
            <info className = "info" alt="info"/>
            <a className = "buttons" onClick={() => this.handleClick("quickSort")}> Quick Sort </a>
            <info className = "info" alt="info"/>
            <a className = "buttons" onClick={() => this.handleClick("mergeSort")}> Merge Sort </a>
            <info className = "info" alt="info"/>
          </div>
        </div>

CSS：

.toolbar {
  height: 67px;
  background-color: #303031;
  display: flex;
  align-items: center;
  position: relative;
  box-shadow: 0px 0px 40px -2px rgba(0,0,0,2);
  z-index: 2;
  position: fixed;
  top: 0;
  width: 100%;
}

.buttons{
  /* text */
  font-size: 16px;
  line-height: 3.14286;
  font-weight: 400;
  letter-spacing: -.01em;
  font-family: "SF Pro Text","Myriad Set Pro","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
  color: #9a9a95;

  /*position*/
  margin-right: 5px;
}

#firstOne {
  margin-left: 335px;
}


.info {
  width: 20px;
  height: 25px;
  background: url("info.png");
  margin-right: 100px;
  display: inline-block;
}

.logo {
  position: absolute;
  top: 50%;
  margin-top: -33px;
  margin-left: 20px;
}

我知道这是一个很长的代码和一个令人困惑的CSS。我是CSS和HTML编码的新手，如果不好，我很抱歉。我会感谢您的帮助。非常感谢

Answer 1

要么使用这个：

<div style="padding-top: 5px;"><info className = "info" alt="info"/></div>

可能会做出如下反应：

<div style={{padding-top: "5px"}}><info className = "info" alt="info"/></div>

或者只给.info{margin-top:5px;}

Answer 2

顶部填充可以提供帮助，但是可能会使按钮更高。您可以使用

.info {
    transform: translateY(3px)
}