Css 菜单项/最佳方式 li 和一个或按钮答案

【问题标题】：Css menu item / best way li and a or buttonCss 菜单项/最佳方式 li 和一个或按钮
【发布时间】：2020-04-26 14:39:57
【问题描述】：

基本上我有一个项目菜单菜单打开时会有一个图标+文本

只有关闭菜单的图标

我不确定我阅读了哪个最佳选项 + a 或按钮

我开始尝试按钮，但我遇到了问题：我不能将文字留在图标的中心

而不是按钮中心的图标

代码：

<MenuDiv>
    <ButtonContainer>
      <Icon name='facebook' size='big' /> Facebook
    </ButtonContainer>
</MenuDiv>

风格的组合：

export const MenuDiv = styled.div`
   width: 100%;
   height: 100%;
   background: #d987;
   padding: 6px;
   display:flex;
   justify-content: center;
`;

export const ButtonContainer = styled(Button)`
   width: 100% !important;
   height: 50px;
   padding:0 !importante;
   color: white !important;
   text-align: left !important;
   margin: 0 !important;
   background-color: red !important;
`;

我想要这个：

我知道了：

codesandbox 示例： https://codesandbox.io/s/zen-goldstine-gps3s

【问题讨论】：

I can't leave the text in the center of the icon and not the icon in the center of the button 是什么意思？有点混乱。
基本上文字在图标上方，看起来并不集中
我相信是因为我的图标没有居中我一路试了也无法修复

标签： css reactjs styled-components

【解决方案1】：

我很确定您必须将text-align: left !important; 修复为
text-align: center !important; 或尝试将margin: auto 用于“Facebook”，更改此：

text-align: left !important;

到这里：

`text-align: center !important`

【讨论】：

【解决方案2】：

我认为您想要实现的是在这个沙盒中： https://codesandbox.io/s/winter-sea-hekws

以下是变化：

在 index.html 中添加样式：您必须导入 <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" /> 这是为了显示图标。
ButtonContainer 样式：我更改了background-color:blue 并添加了一些填充：padding: 5px 10px !important;
图标：<Icon name="dashboard" size="big" /> Dashboard

【讨论】：

我相信这会测试非常感谢你的兄弟
您好，我切换到 facebook 图标并意识到图标仍然继续，好像它没有居中对齐并且文本也一样
所以你想把文本放在中间？我会检查沙盒并修复。
Não falo no centro do botão em largura mas sim em altura
基本上在我看来图标不在按钮的中心我认为问题是图标而不是文本