Выравнивание строчно-блочных элементов | Трепачёв Дмитрий
Строчно-блочные элементы выравниваются так
же, как и строчные — с помощью text-align
в нужном значении, заданном для родителя.
Центрирование элементов
Для примера давайте поставим строчно-блочные элементы по центру:
<div>
<span>text</span>
<span>text</span>
<span>text</span>
</div>
.parent {
text-align: center;
padding: 10px 0;
border: 1px solid red;
}
.child {
display: inline-block;
padding: 10px 20px;
border: 1px solid green;
}
:
Выравнивание по правому краю
Выровняем элемент по правому краю:
<div>
<span>text</span>
</div>
. parent {
text-align: right;
padding: 10px 0;
border: 1px solid red;
}
.child {
display: inline-block;
padding: 10px 20px;
border: 1px solid green;
}
:
Практические задачи
Даны дивы внутри некоторого родителя:
<div>
<div>text 1</div>
<div>text 2</div>
<div>text 3</div>
</div>
.parent {
padding: 10px 0;
border: 1px solid red;
}
.child {
padding: 10px;
border: 1px solid green;
}
Преобразуйте дивы-потомки в строчно-блочные
элементы, задайте им горизонтальный margin
в 5px
, а затем отцентрируйте их по
горизонтали относительно своего родителя.
Дан див внутри некоторого родителя:
<div>
<div>text</div>
</div>
. parent {
padding: 10px 0;
border: 1px solid red;
}
.child {
padding: 10px;
border: 1px solid green;
}
Преобразуйте див-потомок в строчно-блочный элемент, затем выровняйте его по правому краю родителя.
Модифицируйте предыдущую задачу так, чтобы
див не прижимался плотно к правому краю.
Для этого родительскому элементу добавьте
правый padding
.
Модифицируйте предыдущую задачу так, чтобы
див не прижимался плотно к правому краю.
Для этого элементу-потомку поставьте правый margin
.
Дана ссылка внутри некоторого родителя:
<div>
<a href="">text</a>
</div>
.parent {
padding: 10px 0;
border: 1px solid red;
}
.child {
width: 100px;
padding: 10px;
border: 1px solid green;
}
Преобразуйте ссылку в строчно-блочный элемент, затем выровняйте его по правому краю родителя.
Модифицируйте предыдущую задачу так, чтобы текст внутри ссылки выл выровнен по центру этой ссылки.
exercises-css/description.ru.yml at main · hexlet-basics/exercises-css · GitHub
Permalink
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Go to file
Cannot retrieve contributors at this time
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Как выровнять по левому краю и по правому краю внутри div в Bootstrap 5
Когда мы добавляем элементы вКласс поплавка
Классы float в начальной загрузке используются для размещения элемента слева или справа от содержащего его блока.
- .плавающий старт 9Класс 0011 используется для выравнивания элементов по левому краю
- Класс .float-end используется для выравнивания элементов по правому краю.
Пример: выравнивание по левому краю и выравнивание по правому краю с использованием класса Float
Здесь мы использовали классы float для выравнивания элемента в пределах <голова>