Выровнять элемент по вертикали внутри div
У меня проблемы с выравниванием по вертикали моего элемента h3 в моем блоке dim.
Я пробовал несколько методов, но ни один из них, похоже, не работал.
Вот что у меня есть:
Я хочу, чтобы эта «НОВАЯ ВОЛНА» h3 была центрирована по вертикали внутри этого выцветшего прямоугольника, мне удалось выровнять его по горизонтали с justify-content-center, но align-items-center по вертикали не работает.
Кстати, я использую Bootstrap 4.
вот мой HTML-код:
<div class = "container d-flex justify-content-center">
<div class = "dim">
<div class = "new-wave d-flex justify-content-center align-items-center">
<h3>NEW WAVE</h3>
</div>
</div>
</div>
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
0
52
2
Ответы 2
Пожалуйста, попробуйте это.
.new-wave.d-flex.justify-content-center.align-items-center {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Если это был подходящий ответ, пожалуйста, ПРОГЛОТАЙТЕ мой ответ.
—
14.04.2018 21:01
Я люблю это делать, но у меня до сих пор нет репутации, необходимой для этого :(
—
14.04.2018 23:14
Вы пытались добавить этот гибкий класс в родительский контейнер - .dim -?
Вот и все! Спасибо чувак!
—
14.04.2018 20:33
Нет проблем, чувак! :)
—
14.04.2018 23:04
Другие вопросы по теме
Как сгладить анимацию вращения параллельного круга css?
Укладка нескольких градиентов CSS
Как добавить несколько таймеров с помощью Ajax
Попытка wp_enqueue нескольких файлов не удалась
Заставить переход CSS исчезать после достаточно долгого зависания
Цвет наведения таблицы Bootstrap 4
Как выровнять обе панели независимо от высоты?
Можете ли вы помочь мне с отображением встроенной навигации (по горизонтали)?
Эффект постепенного появления / исчезновения: после &: перед элементом с помощью css
CSS не работает с функцией создания на контроллере
Похожие вопросы
Как добавить несколько таймеров с помощью Ajax
Window.location ... выполняется последний javascript
IOS VoiceOver не считывает вложенный элемент <ul>
Сделать кнопку невидимой при нажатии и показать другую кнопку
Определение символа периода как недействительного в шаблоне ввода числа с помощью JavaScript
Привязка данных HTML автоматически удаляет мою строку ввода
Как я могу получить форму идентификатора при нажатии кнопки отправки?
Кнопка не работает с перемешанным массивом
Как выровнять обе панели независимо от высоты?
Можете ли вы помочь мне с отображением встроенной навигации (по горизонтали)?
Ух ты! этот тоже сработал, спасибо, чувак!