#reactjs #flexbox
#reactjs #flexbox
Вопрос:
на моей странице контактов «http://findgirvin.com.s3-website.us-east-2.amazonaws.com/Contact »
значок телефона не центрируется при уменьшении размера экрана мобильного устройства. Я переписывал код несколько раз. Это список MDL. Есть мысли?
Комментарии:
1. Не могли бы вы, пожалуйста, создать минимальный Codesandbox или jsfiddle вашего рассматриваемого кода? Было бы также полезно знать, что вы пробовали и какие медиазапробы вы используете. Публикация вашего css также может помочь понять. Без просмотра вашего кода помочь невозможно.
2. хорошо, я бросил код в изолированную среду codesandbox.io/s/nkyn5y88m4
3. ваш codesandbox не работает, их нет index.js файл для начала, не могли бы вы, пожалуйста, отредактировать, чтобы мы могли вам больше помочь?
Ответ №1:
После просмотра сайта.
Я не знаю, как решить это «способом пользовательского интерфейса mdl», поскольку я его не использовал.
Но вы можете добавить свой собственный CSS в диапазон mdl-list__item-primary-content класса, например:
.mdl-list__item .mdl-list__item-primary-content > span {
display: flex;
flex-direction: column;
align-items: center;
}
Если я использую метод flexbox для центрирования по горизонтали гибкого столбца.
Не забудьте добавить медиа-запросы только для маленького экрана.