英文:
React js Semantic Menu items on center
问题
你好，我有困难将我的内容放在这个 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;
}
英文:
Hello I am having trouble leaving my content at the center of this div
code :
https://codesandbox.io/s/hungry-https-c5432
I tried to put the inline display on h5 and it still didn't work
<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;
}
答案1
得分: 2
要将<b>img</b>居中对齐，您可以添加
margin: 0 auto;
display: block;
要将<b>h5</b>文本居中对齐，您可以添加
text-align: center;
查看此链接：https://codesandbox.io/embed/sweet-glitter-9toif?fontsize=14&hidenavigation=1&theme=dark
英文:
In order to align the <b>img</b> to center you can add
margin: 0 auto;
display: block;
and for aligning the text <b>h5</b> you can add
text-align: center;
Check this link: https://codesandbox.io/embed/sweet-glitter-9toif?fontsize=14&hidenavigation=1&theme=dark
答案2
得分: 1
将以下内容翻译为中文：
"我明白您需要它们在同一行上，因此请将以下内容添加到CSS中：.ui.vertical.menu .item{display:flex; justify-content:center;}"
英文:
i understood you need them on the same line so add this to the css .ui.vertical.menu .item{display:flex;
justify-content:center;}
答案3
得分: 0
需要更新CSS，以下是演示链接。
JSX 代码
<Menu
className="borderless"
style={{ width: "240px", height: "100vh" }}
vertical
>
<Menu.Item className="logo">
<h5>
<Image
src={logo}
style={{ width: "50px", height: "50px", marginRight: "10px" }}
/>
<span>E M A S A</span>
</h5>
<Divider style={{ color: "#000 !important" }} />
</Menu.Item>
</Menu>
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;
}
英文:
You need to update CSS, Here is the demo link
> JSX Code
<Menu
className="borderless"
style={{ width: "240px", height: "100vh" }}
vertical>
<Menu.Item className="logo">
<h5>
<Image
src={logo}
style={{ width: "50px", height: "50px", marginRight: "10px" }}
/>
<span>E M A S A</span>
</h5>
<Divider style={{ color: "#000 !important" }} />
</Menu.Item>
</Menu>
> 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;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论