Bootstrap размещает элемент посередине
Я использую bootstrap в reactjs и пытаюсь поместить текст в середину экрана, но это не работает. не могли бы вы сказать мне, что я сделал не так?
<div className = "h-100 d-flex align-self-center justify-content-center">
<div className = "alert alert-danger">I SHOULD BE CENTER</div>
</div>
может ли кто-нибудь помочь мне, почему это не работает?
Я пробовал и с align-items-cente, и с align-self-center, и это не работает
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
0
32
3
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 3
Вы можете добавить align-items-center. Если я правильно помню, вам может понадобиться использовать flex-direction: column в вашем CSS.
Должно быть align-items-center вместо align-self-center
<div className = "h-100 d-flex align-items-center justify-content-center">
<div className = "alert alert-danger">I SHOULD BE CENTER</div>
</div>
Добавьте классы размеров ширины и высоты class = "vw-100 vh-100 d-flex align-items-center justify-content-center"
—
17.03.2022 16:16
Ответ принят как подходящий
Ну вот...
Как уже предложил @James, вы должны изменить align-self-center на align-items-center, но этого недостаточно. Вам также необходимо внести некоторые изменения в код.
<body className = "vh-100 d-flex justify-content-center align-items-center">
<div className = "container-fluid vh-100 d-flex justify-content-center align-items-center">
<div className = "alert alert-danger">I AM CENTERED</div>
</div>
</body>
body {
background-color: yellow !important;
}
Другие вопросы по теме
Хотите настроить MUI - панель инструментов с данными и позиционирование вверху страницы
Почему изменения значения флажка не отображаются?
Я хочу сообщить компоненту входа в систему reactjs, был ли вход в систему успешным или нет
React Native: создайте собственный дочерний узел в базе данных Firebase в реальном времени
Интеграция Google <model-viewer> с React/Reagent
Форма Next.js reCAPTCHA возвращает окно undefined - react-hook-recaptcha
React Как добавить полезную нагрузку в редуктор
Как назначить ответ от API массиву с помощью функции выборки
Невозможно передать параметр функции обратного вызова React Button при нажатии
Форма React Hook и постоянные данные при перезагрузке страницы
Похожие вопросы
Граница на всю ширину сетки
Javascript работает только для одного элемента, только для первого
Таблицы и их содержимое отодвигаются в сторону — почему?
Как разместить изображение в div нестатического размера?
Как добавить текст и img в кнопку значения с помощью jquery
Упорядоченный список 1, 1.1, а
Как разместить строку меню и логотип с помощью css?
В word-break: break-word я хочу использовать первое слово в следующей строке с заглавной буквы с помощью CSS/JS. Возможно ли это?
В маленьком экране из левого css
Я хочу скрыть полосу прокрутки в меню переключения
Я пробовал и с
align-items-cente, и сalign-self-center, и это не работает