React js语义菜单项居中

Question

您好，我无法将内容放在此div的中心

代码：https://codesandbox.io/s/hungry-https-c5432

我试图将嵌入式显示器放在h5上，但仍然无法正常工作

<div className="App">
  <Menu
    className="borderless"
    style={{ width: "240px", height: "100vh" }}
    vertical
  >
    <Menu.Item className="logo">
      <Image src={logo} style={{ width: "50px", height: "50px" }} />
      <h5>E M A S A</h5>
      <Divider style={{ color: "#000 !important" }} />
    </Menu.Item>
  </Menu>
</div>

css：

.ui.menu {
  border-radius: 0px !important;
  border: 0px !important;
  box-shadow: none !important;
  background-color: #252631 !important;
}
.ui.menu .item {
  padding: 8px !important;
}
r {
  margin-bottom: 0 !important;
}r {
  margin-bottom: 0 !important;
}

Answer 1

为了使image居中对齐，您可以添加margin: 0 auto;

并且用于对齐文本h5，您可以添加text-align: center;

Answer 2

您需要更新CSS，这是demo link

JSX代码

<div className="App">
  <Menu
    className="borderless"
    style={{ width: "240px", height: "100vh" }}
    vertical
  >
    <Menu.Item className="logo">
      <Image src={logo} style={{ width: "50px", height: "50px" }} />
      <h5>E M A S A</h5>
      <Divider style={{ color: "#000 !important" }} />
    </Menu.Item>
  </Menu>
</div>

CSS

.ui.menu {
  border-radius: 0px !important;
  border: 0px !important;
  box-shadow: none !important;
  background-color: #252631 !important;
}

.ui.menu .item {
  padding: 8px !important;
  text-align: center;
}

.ui.menu .item h5 {
  text-align: center;
}

.ui.divider {
  margin-bottom: 0 !important;
}

img.ui.image {
  display: inline-block;
}