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

我有一个导航栏，现在看起来像这样：

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

我试图改变“信息”图标的位置，使它们比现在稍微向下。理想情况下，大约3-5像素，再向下

如果我试着加上像“页边空白：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。我不熟悉CSS和HTML编码，如果它不好，我很抱歉。我非常感谢你的帮助。非常感谢

请使用以下选项：

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

填充top可能会有所帮助，但它可能会使按钮更高。你可以用

.info {
    transform: translateY(3px)
}

---

它不起任何作用。您是否将此样式指定给了.info？我忘了首先添加选择器。