В этом руководстве демонстрируется процедура горизонтального и вертикального выравнивания с помощью CSS.
Как выровнять по горизонтали и вертикали с помощью CSS?
Разработчики используют «горизонтальное» и «вертикальное» выравнивание для более организованного размещения элементов на веб-странице. Они могут быть полезны при выравнивании элементов и содержимого, расположении кнопок или значков и т. д. Следуйте приведенным ниже примерам для лучшего понимания:
Горизонтальное выравнивание
В CSS свойство text-align используется для горизонтального выравнивания текста внутри его родительского элемента. Посетите приведенные ниже фрагменты кода для лучшего понимания:
< тело >
< див сорт '=' 'счет' >
< див сорт '=' 'выравнивание по левому краю' > Linuxhint выравнивается по левому краю < / див >
< див сорт '=' 'выравнивание по центру' > Linuxhint выравнивается по центру < / див >
< див сорт '=' 'выравнивание по правому краю' > Linuxhint выровнен по правому краю < / див >
< / див >
< / тело >
В приведенном выше фрагменте кода:
- Во-первых, родитель» див » используется с атрибутом класса, имеющим значение « счет ».
- Затем были созданы три дочерних элемента, и каждому элементу div был назначен атрибут класса.
- В конце классам предоставляются значения «leftAlign», «centerAlign» и «rightAlign».
Теперь вставьте следующие свойства CSS в « <стиль> ' ярлык:
<стиль >
.leftAlign {
отображать : встроенный блок ;
ширина : 30% ;
набивка : 20 пикселей ;
фоновый цвет : зеленый лес ;
выравнивание текста : левый ;
}
.centerAlign {
отображать : встроенный блок ;
ширина : 30% ;
фоновый цвет : красный ;
набивка : 20 пикселей ;
выравнивание текста : центр ;
}
.rightAlign {
отображать : встроенный блок ;
ширина : 30% ;
фоновый цвет : чирок ;
набивка : 20 пикселей ;
выравнивание текста : верно ;
}
>
В приведенном выше блоке кода:
- Сначала выбираются все три класса по отдельности, а затем применяются свойства CSS» отображать », « ширина », « фоновый цвет ' и ' набивка ' им. Эти свойства используются для улучшения целей визуализации.
- Далее значения « левый », « центр ' и ' верно » предоставляются « выравнивание текста ” имущество к “ выровнять по левому краю », « выровнять по центру ', и ' выровнять по правому краю классов соответственно.
После процесса компиляции HTML-элементы выглядят так:
На приведенном выше снимке браузера видно, что элементы выровнены по горизонтали в левом, центральном и правом положениях.
Вертикальное выравнивание
CSS « вертикальное выравнивание » выравнивает выбранный элемент по « ось Y ” внутри своего родительского элемента. Возможные значения свойства «vertical-align»: исходный уровень », « суб », « супер », « вершина », « текст сверху », « середина », « нижний ', и ' текст внизу ». Однако разработчики в основном используют значения «верхний», «средний» и «нижний» при создании дизайна веб-страницы. Чтобы выровнять выбранный элемент HTML по верхнему положению, воспользуйтесь приведенным ниже фрагментом кода:
< див сорт '=' 'считать' >< изображение источник '=' 'hiunsplash.jpg' ширина '=' '200 пикселей' высота '=' '200 пикселей' >
< охватывать сорт '=' 'заголовок по верхнему краю' > Этот текст выровнен по вертикали сверху рядом с изображением < / охватывать >
< / див >
В приведенном выше фрагменте кода:
- Сначала создайте родителя ' див ” и присвойте значение “ считать ” к “ сорт атрибут.
- Внутри родительского контейнера используйте « <изображение> » и укажите путь к изображению в качестве значения для « источник атрибут.
- Кроме того, укажите значение « 200 пикселей ” к обоим “ ширина ' и ' высота ” атрибуты “ <изображение> ' ярлык.
- Далее используйте « <диапазон> » и предоставьте ему класс « заголовокTopAlign ». В конце предоставьте ему фиктивные данные.
Теперь добавьте свойства CSS для стилизации HTML-элементов:
.считать {ширина : фит-контент ;
отображать : блокировать ;
поле слева : 100 пикселей ;
набивка : 10 пикселей ;
граница : 2 пикселя твердый красный ;
}
.captionTopAlign {
вертикальный
В приведенном выше блоке кода:
- Сначала выберите родителя « считать » и укажите значения «fit-content», «block», «100px», «10px» и «2px сплошной красный» в CSS « ширина », « отображать », « поле слева », « набивка ' и ' граница ' характеристики. Эти свойства используются для стилизации родительского элемента.
- Далее выберите « заголовокTopAlign » и укажите значение « вершина 'к CSS' вертикальное выравнивание ' свойство. Это заставляет элемент HTML выравниваться по верхнему положению.
После выполнения приведенных выше строк кода веб-страница выглядит следующим образом:
Приведенный выше снимок показывает, что выбранный элемент HTML теперь выровнен по верхнему краю. Таким же образом элемент можно выровнять по центру, по низу и т. д.
Заключение
Для горизонтального и вертикального выравнивания « выравнивание текста ' и ' вертикальное выравнивание Свойства CSS используются соответственно. Свойство text-align допускает значение « левый », « верно », « центр ' и ' оправдывать ». С другой стороны, возможные значения свойства «vertical-align»: исходный уровень », « суб », « супер », « вершина », « текст сверху », « середина », « нижний ', и ' текст внизу ». Горизонтальное и вертикальное выравнивание помогает создавать чистый и профессиональный веб-дизайн.