Reactjs 带有图像的语义ui反应菜单失去对齐

我刚开始使用语义ui react构建个人网站，当我将徽标作为图像添加到菜单中时，它会使右侧的图标对齐。我一直在修补不同的语义ui菜单属性，但都没有用，而且我对css也不是很在行，所以非常感谢您的帮助。我尝试对菜单项使用fitted=属性，但没有帮助。如果我尝试将菜单项包装在一个div中并填充它们，那么整个菜单都会被抛出

守则：

import React, { Component } from 'react'
import { Link, NavLink, withRouter } from 'react-router-dom'
import { Button, Icon, Image, Menu } from 'semantic-ui-react'
//TODO: make paths absolute
import logo from '../../static/images/bridge-logo-trans.png'

const menuItems = [
  {name: "About", link: "/about"},
  {name: "Resume", link: "/resume"},
  {name: "Blog", link: "/blog"},
];

const contactItems = [
  {color: "black", icon: "github", link: "link1"},
  {color: "linkedin", icon: "linkedin", link: "link2"},
  {color: "red", icon: "mail", link: "link3"}
];


class TopMenu extends Component {

  constructor(props) {
    super(props);
    this.state = {
      activeItem: "",
    }
    this.handleItemClick = this.handleItemClick.bind(this);
    this.handleLogoClick = this.handleLogoClick.bind(this);
  }

  handleItemClick(e, menuItem) {
    this.setState({ activeItem: menuItem.name });
  }

  handleLogoClick(e) {
    this.setState({ activeItem: menuItems[0].name });
  }

  render() {

    return (
      <Menu stackable>
        <Menu.Item>
          <Image as={NavLink} to="/"
                 src={logo} size='small' onClick={this.handleLogoClick}/>
        </Menu.Item>
          {menuItems.map((item) => (
            <Menu.Item
              as={NavLink}
              to={item.link}
              name={item.name}
              active={this.state.activeItem === item.name}
              onClick={this.handleItemClick}
            >
              {item.name}
            </Menu.Item>
          ))}
          <Menu.Menu position="right">
            {contactItems.map((item) => (
              <Menu.Item
                as="a"
                href={item.link}
                target="_blank"
              >
                <Button circular color={item.color} icon={item.icon} />
              </Menu.Item>
            ))}
          </Menu.Menu>
        </Menu>
    )
  }
}

export default withRouter(TopMenu);

import React，{Component}来自“React”
从“react router dom”导入{Link，NavLink，withRouter}
从“语义ui反应”导入{按钮、图标、图像、菜单}
//TODO:使路径成为绝对路径
从“../static/images/bridge logo trans.png”导入徽标
常量菜单项=[
{name:“About”，link:“/About”}，
{name:“Resume”，链接：“/Resume”}，
{name:“Blog”，链接：“/Blog”}，
];
const contactItems=[
{颜色：“黑色”，图标：“github”，链接：“link1”}，
{颜色：“linkedin”，图标：“linkedin”，链接：“link2”}，
{颜色：“红色”，图标：“邮件”，链接：“链接3”}
];
类TopMenu扩展组件{
建造师（道具）{
超级（道具）；
此.state={
活动项：“”，
}
this.handleItemClick=this.handleItemClick.bind（this）；
this.handleLogoClick=this.handleLogoClick.bind（this）；
}
handleItemClick（e，菜单项）{
this.setState（{activeItem:menuItem.name}）；
}
手动单击（e）{
this.setState（{activeItem:menuItems[0].name}）；
}
render（）{
返回(
{menuItems.map（（项）=>(
{item.name}
))}
{contactItems.map（（项目）=>(
))}
)
}
}
使用路由器导出默认值（顶部菜单）；

通过在右菜单中添加“top”属性修复了该问题，如下所示：

<Menu.Menu position="right">
            {contactItems.map((item) => (
              <Menu.Item
                style={{top: '0.8em'}}
                as="a"
                href={item.link}
                target="_blank"
              >
                <Button circular color={item.color} icon={item.icon} />
              </Menu.Item>
            ))}
          </Menu.Menu>

{contactItems.map（（项目）=>(
))}

---

不要问我为什么…

这是一个CSS问题，你对品牌或物品本身有一些风格。你能做一个沙箱来复制同样的条件吗？最有可能的是，品牌形象的样式为项目提供了填充/边距，请参见src/Components/TopMenu.jsx和dist/style.css