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

Question

So I have a navbar that currently looks like this:

I'm trying to change the position of the "info" icons so that they're slightly more down than now. Ideally something like 3-5 px more down.

If I try to add like "margin-top: 5px" also the written come down with it, not solving my issues.

This is my code:

React Render:

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

I know it's a long code and a confusing CSS. I'm new to CSS and HTML coding I'm sorry if it's bad. I'd appreciate some help. Thanks a lot

Answer 1

Either use this:

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

Probable in react something like this:

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

Or just give .info{margin-top:5px;}

Answer 2

padding-top can help, but it will probably make the buttons higher. You can use

.info {
    transform: translateY(3px)
}