Css пункт меню / лучший способ li и кнопка или

Question

В основном у меня есть пункт меню, который будет иметь значок + текст с открытым меню

и значок только с закрытым меню

Я сомневаюсь, какой вариант лучше читать + 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;
`;

Я хочу это:

Я получил это:

пример для кодов и коробки: https://codesandbox.io/s/zen-goldstine-gps3s

Answer 1

Я думаю, что вы хотите достичь здесь в этой песочнице: https://codesandbox.io/s/winter-sea-hekws

следующие изменения:

• Добавлен стиль в индексе . 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

Answer 2

Я уверен, что вам нужно исправить text-align: left !important; на
text-align: center !important; или попытаться поставить margin: auto для "Facebook", измените это:

text-align: left !important;

на это :

`text-align: center !important`