Центрирование в CSS
Если полоса — блочный элемент, и нужно выровнять ее по центру родительского контейнера, в котором больше ничего не лежит, то можно так:
margin:0 auto; Если в родительском контейнере что-то лежит и вам не хочется разбираться с flex, то можно так:
.container < position:relative; >.container .vline
Если вам нужна эта полоса поверх всего по центру экрана, то можно так:
.vline
Либо конкретизируйте вопрос и добавьте больше кода.
Как отцентрировать элемент?
Без помощи родительского блока, абсолютного позиционирования и смещений?
По горизонтали понятно, боковые отступы. Но что касается вертикали, есть аналогичные способы?
- Вопрос задан более года назад
- 66 просмотров
7 комментариев
Простой 7 комментариев
Rustam Bainazarov @SmthTo Куратор тега CSS
Нужен конкретный пример или скриншот того, что нужно получить в итоге. Чем не устраивает тот же flex для родителя?
Ankhena @Ankhena Куратор тега CSS
Вы удивитесь CSS центрирование
Guest3302 @Guest3302 Автор вопроса
Ankhena, прочитал три первые статьи из выдачи. Каждый способ подразумевает либо комбинацию с родителем, либо абсолютное позиционирование, либо смещение, но тоже с абсолютным позиционированием.
Guest3302 @Guest3302 Автор вопроса
Рустам Байназаров, ничего сверхъестественного: просто отцентрировать элемент внутри родителя. Чтобы вне зависимости от его размеров (80/80% или 25/25%), он всегда находился в центре — и по горизонтали, и по вертикали.
По горизонтали понятно, там боковые отступы, но как центровать по вертикали, непонятно.
Чем не устраивает тот же flex для родителя?
Устраивает, я задал вопрос чисто из любопытства.
Ankhena @Ankhena Куратор тега CSS
Guest3302, ели вы ничего не будете делать с родителем, то его высота будет равна высоте дочернего. И выравнивать нечего. Если же с родителем уже проведены какие-то манипуляции (задана высота, флекс и т.д.), то почему бы не продолжить.
Guest3302 @Guest3302 Автор вопроса
Ankhena, я согласен, что рабочим будет любой из этих способов, в том числе флексы. Я спросил из любопытства, есть ли вертикальная альтернатива margin: auto или иной, но подобный способ вертикальной «центровки».
Ankhena @Ankhena Куратор тега CSS
Guest3302, нет, без манипуляций с родителем, если это не изначально таблица, так не получится.
прочитал три первые статьи из выдачи. Каждый способ подразумевает либо комбинацию с родителем, либо абсолютное позиционирование, либо смещение, но тоже с абсолютным позиционированием.
Центрируй, властвуй, располагай
Всем привет, с вами Кирилл Мыльников, frontend разработчик компании Usetech.
Сегодня я хочу рассказать о вертикальном и горизонтальном центрировании CSS (Cascading Style Sheets). В сети есть много статей на эту тему, но я хочу выделить все виды горизонтального и вертикального центрирования с примерами.
Тема довольно популярная для тех, кто просто верстает или занимается полноценной frontend-разработкой (ведь нам всегда нужно что-то центрировать).
Существует множество способов, как нужно отцентрировать элемент, в тех или иных ситуациях, каждый способ по своему хорош.
В этой статье я разберу следующие виды центрирования:
— Горизонтальное центрирование;
— Вертикальное центрирование;
— Горизонтальное и вертикальное центрирование.
Горизонтальное центрирование
1. Данное свойство подходит только для инлайновыйх (inline) элементов, достаточно указать text-align: center родителю.
2. Для центрирования блочных элементов свойство text-align: center уже не подойдет. Есть простое распространённое свойство margin: 0 auto. Всё, что нам нужно, это знать ширину блока, а свойство margin 0 auto задаст следующие значения: сверху и снизу будет 0, а по бокам размеры будут заданы автоматически и блочный элемент встанет по центру.
3. Центрирование через margin это, конечно, хорошо, но есть ещё гибкое свойство display: flex. Нам нужно задать данное свойство родителю display: flex и justify-content: center — выравнивает элемент по центру.
4. Следующее свойство — это display: grid.
Алгоритм действий как с display: flex: задать данное свойство родителю и указать justify-content: center.
Сегодня свойства grid и flexbox очень популярны в web разработке. Далее я покажу, как при помощи этих свойств можно центрировать элементы по горизонтальной и вертикальной осям.
5. Сейчас я покажу необычное сочетание свойств text-align + display: inline-block.
Да, так тоже можно отцентрировать блочный элемент или элементы, если вам это необходимо. В самом первом примере я говорил, что свойство text-align применяется только для инлайновых элементов, но если мы укажем свойство блочному элементу display: inline-block, то он станет блочно-строчным. Это означает, что свойство text-align станет доступным и элемент встанет по центру.
Небольшая подсказка: display: inline-block нужно будет задавать не родительскому блоку, а каждому из блоков, к которым мы хотим применить данное свойство. И вновь показываю на примере.
Мы разобрались с горизонтальным центрированием, теперь перейдём к вертикальному.
Вертикальное центрирование
1. Данное свойство подходит для таблиц — это vertical-align: middle.
При использовании этого типа центрирования нужно учитывать следующие условия:
- Прописываем display: table родителю;
- Дочернему элементу должны прописать display: table-cell, чтобы элемент стал ячейкой;
- Прописываем ячейке свойство vertical-align: middle и всё, элемент становится по центру.
2. Есть такой случай, когда высота центрируемого элемента известна, а высота родителя может быть любой. Здесь мы можем применить абсолютное позиционирование. Сейчас по пунктам разберём, что конкретно нужно сделать.
- Задать дочернему элементу position: absolute и опустить top: 50%;
- Так как у дочернего элемента высота может быть любая, мы должны эту высоту разделить на 2 и результат прописать в margin-top в отрицательном значении.
3. Когда нам нужно центрировать строку уже с известной высотой, мы просто можем указать line-height и указать ту же высоту.
4. Центрируем с помощью внутренних отступов (padding):
- Элемент должен быть строчным;
- Элемент должен помещаться в одну строку.
5. Ещё один способ вертикального центрирования с помощью vertical-align. Я рассматривал это свойство выше, но на примере с таблицами. Помимо этого, свойство ещё работает с display: inline/inline-block. Проще говоря, с инлайновыми элементами.
Вы должны учесть следующие условия:
- Высота родителя должна быть известна, а центрируемого элемента нет;
- Свойство line-height наследуется, поэтому надо знать корректную высоту строки.
6. Разберём еще один случай, когда высота центрируемого элемента неизвестна. Здесь нам снова поможет абсолютное позиционирование. Давайте подробно опишем, что мы должны сделать.
- Указываем дочернему элементу position: absolute и элемент опускаем в top: 50%;
- Затем в нашем элементе мы прописываем свойство transform: translate (-50%) и всё, наш элемент находится на центре.
7. Способ вертикального центрирования с помощью свойства display: flex. С этим свойством можно отцентровать элементы по вертикали. Для этого необходимо задать родителю следующие свойства: display: flex, flex-direction: column, justify-content: center.
8. Способ вертикального центрирования с помощью display: grid. В случае с вертикальным центрированием тут всё намного проще, чем с flexbox. Нам нужно указать родителю следующие свойства: display: grid и align-items: center
9. Следующий случай, когда высота дочернего элемента неизвестна и родитель неизвестен. Чтобы задать центрирование, нам нужно:
- Дочернему элементу задать position: absolute, top: 0, bottom: 0, в результате чего он растянется на всю высоту внешнего блока;
- Задаем значение margin: auto 0 дочернему элементу для вертикальных отступов внутреннего блока.
10. Заключительный способ в вертикальном центрировании: если неизвестна высота родителя и дочернего элемента, то нам поможет псевдоэлемент before.
- Родителю указываем псевдоэлемент before, прописываем display: inline-block и указываем высоту в 100%. Таким образом мы занимаем всю допустимую высоту;
- Центрируемый блок выравниваем по центру с помощью vertical-align: middle.
Горизонтальное и вертикальное центрирование
Пришло время для центрирования элементов по вертикали и горизонтали. Давайте рассмотрим на конкретных примерах.
1. Если есть случаи, когда высота и ширина элемента неизвестны, нужно сделать следующее: указать дочернему элементу свойства position: absolute, top: 50%, left: 50% и transform: translate(-50%, -50%).
2. Мы возвращаемся к flexbox, который выручает нас как никто другой. Нам нужно знать высоту и задать такие свойства: display flex; justify-content: center, align-items: center.
3. Grid тоже не сидит на месте: свойства почти идентичны, но мы задаем display: grid вместо flex соответственно. Перед использованием grid посмотрите поддержку данного свойства в браузерах.
4. Бывают ситуации, когда ширина и высота элемента фиксированные, а для этого нам нужно:
- Сделать отступы с отрицательными значениями;
- Задать position: absolute со значениями top: 50%, left: 50% это и отцентрирует элемент родителя.
5. Если мы хотим центрировать инлайновый элемент (inline, inline-block), то нам нужно свойство vertical-align. Для этого надо указать родителю псевдоэлемент before (этот пример я показывал выше), но в данном случае мы должны центрировать элементы по обе оси — вертикальной и горизонтальной. Для этого мы должны указать родителю text-align: center.
6. Ранее я уже рассказывал, как можно центрировать элементы в таблицах, но на примере с вертикальным центрированием. В случае с вертикальным и горизонтальным центрированием, вы можете вернуться к тому шагу и в добавлении указать ячейке свойство text-align: center.
Итак, мы разобрали все способы центрирования в CSS. Каждый способ уникален по своему и выбирать их нужно по ситуации. А каким из способов пользуетесь вы?
- css
- центрирование
- горизонтальное центрирование
- вертикальное центрирование
Как работают псевдоклассы в CSS. Подробное объяснение с примерами и диаграммами
Наверняка каждый, кто работал с CSS, не раз впадал в отчаяние. Например, когда пытался отцентрировать дочерний элемент по отношению к родительскому, что является весьма нетривиальной задачей. В этой статье мы рассмотрим ещё более сложную тему — псевдоклассы, один из видов селекторов.
Прим. перев. Псевдоклассы предназначены для изменения стиля существующих элементов страницы в зависимости от их динамического состояния, например, при работе со ссылками ( :link , :visited , :hover , :active , :focus ).
В этой статье мы познакомимся с двумя типами псевдоклассов:
- селекторы *-of-type ;
- селекторы *-child .
Иногда сложно понять, что такое псевдоклассы и как они работают. Главная сложность состоит в том, что они представлены в абстрактном виде. Поэтому для упрощения восприятия использованы схемы с DOM-деревьями.
Разметка и DOM-дерево
Обратите внимание на HTML-код, представленный ниже. Он будет использоваться во всех примерах в этой статье.
-
Вложенная в список ссылка 1
- Элемент списка 1
- Элемент списка 2