В веб-разработке крайне важно правильно создать макет элемента. Однако многие свойства CSS, такие как гибкая рамка CSS3, полезны для настройки макета веб-страниц и элементов HTML. Гибкая коробка используется для организации веб-страниц и приложений рекурсивным образом. Этот режим Flexbox помогает создавать макеты для сложных веб-страниц и приложений.
Этот пост расскажет вам, как центрировать элемент div для всех браузеров с помощью CSS по вертикали.
Как выровнять элемент div с помощью CSS?
Элемент div можно выровнять по вертикали, используя свойство display « сгибаться 'вместе с CSS' выравнивание элементов «имущество и» выравнивание содержания ' имущество. Свойство «align-items» выравнивает элемент по вертикали, а свойство «justify-content» выравнивает содержимое по горизонтали.
Пример: как вертикально центрировать элемент div с помощью CSS?
В HTML сначала добавьте « <дел> » элемент и присвоить ему класс « основное содержание ». Между тегами «
- “ источник ” используется для указания URL-адреса изображения.
- “ все Атрибут определяет некоторый текст, который будет отображаться вместо изображения, если оно не загрузится.
- “ ширина Атрибут используется для настройки ширины изображения.
- Затем добавьте « », чтобы встроить абзац на страницу.
Вот HTML-код:
< див класс знак равно 'основное содержание' >< изображение источник знак равно '/images/ноутбук-блокнот.jpg' все знак равно 'Ноутбук с блокнотом и ручкой' ширина знак равно '300' >
< п > Ноутбук — портативный компьютер, также известный в качестве ноутбук. п >
див >
В CSS мы укажем несколько свойств стиля для div.
Стиль «основной контент» Класс
.основное содержание {высота: 50 % ;
фоновый цвет: #46C2CB;
размер шрифта: 24px;
отступ: 10 пикселей;
}
Следующие свойства CSS определены в « основное содержание ' класс:
- “ высота ” используется для настройки высоты контейнера .
- “ фоновый цвет ” определяет цвет фона элемента.
- “ размер шрифта ” определяет размер шрифта элемента.
- “ набивка » задает пространство вокруг содержимого элемента.
Из вывода видно, что содержимое элемента div находится не в центре:
Давайте перейдем к применению свойств CSS, которые помогают центрировать « <дел> » по вертикали. Добавьте эти свойства в класс « основное содержание ”, которые используются для доступа к элементу
: отображать: сгибаться ;
выравнивание элементов: по центру;Вот описание:
- “ отображать ' имущество ' сгибаться ” используется, чтобы сделать макет div гибким для своего элемента.
- “ выравнивание элементов » Свойство CSS установлено как « центр ”, который выровняет элементы div по вертикали.
Вывод
Вы узнали, как центрировать элемент div по вертикали для всех браузеров, использующих CSS.
Заключение
Чтобы центрировать элемент div по вертикали, CSS « отображать ” свойство используется с “ сгибаться ' ценить. Это значение делает контейнер
гибким для его элементов. Чтобы выровнять элемент div по вертикали, отрегулируйте « выравнивание элементов ” и присвойте ему “ центр ' ценить. В этом блоге показано, как использовать CSS для вертикального центрирования элементов div во всех браузерах.