Блог

У меня возникли проблемы при попытке настроить пользовательский стиль для выбора кнопок пользовательского интерфейса material, при этом я пытаюсь выровнять текстовую часть левой части кнопки влево, сохраняя при этом текст с правой стороны по центру.

Я использую модули css и makeStyles.

justifyContent: «center» работал для правой части divs (classes.activityButton).

justifyContent: «flex-start» не работает для левой стороны (classes.LeftSide).

также вы можете видеть, что «СИДЯЧАЯ» часть кнопки выровнена иначе, чем «СЛЕГКА АКТИВНАЯ», даже если у них одинаковые команды?

пример моего приложения

Проблема связана с вашей структурой html, justify-content только выравнивает дочерние элементы элемента по горизонтали на элементе, к которому вы его применяете. Он не будет выравнивать сам элемент.

Вам нужно либо:

• Используйте символы с плавающей запятой
• Используйте сетку

Также смотрите Это руководство по flex, оно очень полезно: https://css-tricks.com/snippets/css/a-guide-to-flexbox /