Как выровнять два блока по горизонтали css
Перейти к содержимому

Как выровнять два блока по горизонтали css

  • автор:

5 способов горизонтального выравнивание блоков по центру

5 способов горизонтального выравнивание блоков по центру

Почему горизонтальное выравнивание блоков по центру — тема актуальная для начинающих верстальщиков? Связано это с левосторонним позиционированием элементов на HTML странице по умолчанию. Давайте рассмотрим на наглядном примере. У нас есть блок-родитель с черной рамкой, внутри которого расположен фиолетовый блок-ребенок.

// CSS код родительского блока
.wrap max-width: 400px;
margin: 50px auto;
border: 3px solid black;
min-height: 100px;
>

// CSS код дочернего блока
.block width: 100px;
height: 100px;
margin: 5px;
background: blueviolet;
>

Мы видим, что дочерний блок прижат к левому краю родительского блока. Такое поведение элементов является дефолтным. В реальных дизайнерских макетах для верстки, большинство элементов выровнены по центру относительно браузера и других элементов. Поэтому с необходимостью постоянно что-то выравнивать, начинающий верстальщик столкнется практически сразу.

5 способов горизонтального выравнивание блоков по центру.

Я знаю по меньшей мере 5 способов горизонтального выравнивания блоков по центру.

1) Свойство text-align (используется, но реже)

Добавим класс center со свойством text-align: center к родительскому блоку и отобразим дочерний блок, как inline-block.

.center text-align: center;
>

.block .
display: inline-block;
>

5 способов горизонтального выравнивание блоков по центру.

2) Свойство margin: auto (актуальное)

Данное свойство мы прописываем дочернему блоку. В сокращенной записи верхнему и нижнему отступу мы можем оставить нулевое значение или указать нужные размеры согласно макету для верстки. Но нас интересует значение auto, как раз оно и задает автоматический отступ с левой и с правой стороны от вложенного блока. Это значит, что пространство с обеих сторон должно рассчитываться поровну. Этот способ выравнивания и по сей день является самым популярным у верстальщиков при горизонтальном выравнивании.

3) Свойство position: absolute (устаревшее)

Когда к дочернему блоку применяется position: absolute, то оно перестает влиять на родителя. Поэтому для родителя мы задаем position: relative, чтобы позиционироваться от него. А ребенку задается position: absolute, смещаем его на 50% влево и задаем отступ на половину его ширины. Не рекомендую использовать этот способ, так как он противоречит принципу независимого переиспользования блоков.

.relative position: relative;
>

.absolute position: absolute;
left: 50%;
transform: translate (-50%, 0); /* альтернатива margin-left: -50px; */
>

4) Свойство flexbox (популярное)

Flexbox — самый простой и современный способ горизонтального выравнивания по центру. Для родителя добавляются два флексовых свойства.

5) Свойство grid (современное)

Еще один современный способ выравнивания — это grid. Добавляем родителю всего два grid свойства, а вложенному блоку — три grid свойства.

.grid-parent display: grid;
grid-template-areas: «a»;
>

.grid-child grid-area: a;
justify-self: center;
>

Создано 04.11.2020 10:53:02

  • Михаил Русаков
  • Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

    Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
    Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

    Если Вы не хотите пропустить новые материалы на сайте,
    то Вы можете подписаться на обновления: Подписаться на обновления

    Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

    Порекомендуйте эту статью друзьям:

    Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

    1. Кнопка:
      Она выглядит вот так:
    2. Текстовая ссылка:
      Она выглядит вот так: Как создать свой сайт
    3. BB-код ссылки для форумов (например, можете поставить её в подписи):

    Комментарии ( 1 ):

    romas_s 04.11.2020 18:14:39

    Добрый день, бы ло бы интересно почитать статью как выровнять блоки по высоте.

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2024 Русаков Михаил Юрьевич. Все права защищены.

    Как расположить несколько блоков div в ряд?

    Одной из самых частых задач в вёрстке страницы — равномерное расположение блоков div по горизонтали с возможностью переноса на следующую строку. Для этого блоки

    нужно расположить в однин горизонтальный ряд. При этом, при масштабировании окна браузера они должны равномерно переноситься. Или при выводе изображений из базы данных, например аватаров, нужно чтобы картинки были все в один ряд. Как это сделать?

    Располагаем n блоков div в горизонтальный ряд

    Всё достаточно просто. Воспользуемся свойством float (выравнивание с обтеканием). Важно, чтобы минимальная ширина страницы/окна/родительского элемента позволяла вместить в себя как минимум два. Остальные блоки переносятся на следующую строку.

    Как запретить обтекание блоков

    Бывает так, что одна строка может наехать на другую. Для этого отменим обтекание свойством clear. Зададим его для div, который будет размером по высоте в 1 пиксель и ширине 100%. При надобности, такими пустыми блоками DIV можно запретить обтекание всех внутренних блоков, сверху и снизу.

    Теперь к практике, примерам и исходникам.

    Пример горизонтального расположения нескольких блоков

    Всем div мы присвоим параметр float:left. Для наглядности создадим 6 таких блоков:

    DIV 1 DIV 2 DIV 3 DIV 4 DIV 5 DIV 6

    Смотрим пример работы и скачиваем исходники:

    Рекомендую масштабировать страницу и посмотреть за поведением элементов.

    Если задача состоит в том, чтобы расположить два больших блока в один ряд, то нужно float для них задать left для одного и right для другого. Опять же, ширина блоков не должна превышать ширину страницы/окна/родителя, иначе они перенесутся на следующую строку.

    Спасибо за внимание! Удачи в вёрстке!

    Как расположить два блока рядом css

    Для того чтобы расположить рядом для элемента, например , которые по умолчанию блочные элементы, а значит занимают всю доступную ширину экрана, достаточно изменить тип отображения ( display ) на значение inline-block, и элементы встанут в ряд. Рассмотрим пример. Исходный HTML имеет вид:

      class="block">Первый  class="block">Второй  
    .block  display: inline-block; border: 1px solid blue; margin: 2px; > 

    С таким вариантом есть одна особенность. Если, к примеру, текст в во втором блоке будет сильно длинный, то браузер перенесет этот блок на новую строку чтобы уместить содержимое, и отобразить контент полностью.

    Чтобы этого избежать можно применить другой способ, как расположить два блока рядом. Добавим в исходный HTML обертку, и назначим ему способ отображение как flex элемент. Во первых, наши элементы встанут в ряд, а во вторых, они не будут переносится на следующую строку. Вместо этого просто появится полоса прокрутки.

      class="wrapper">  class="block">Первый  class="block">Второй   
    .wrapper  display: flex; > .block  display: inline-block; border: 1px solid blue; margin: 2px; > 

    Выравнивание блоков равномерно по горизонтали

    Есть три блока на сайте одинаковой высоты, расположенные в одну строку. Левый (1) привязан к левой стороне браузера, а средний (2) и правый (3) к правой стороне браузера. дано
    (источник: joxi.ru) Задача: нужно, чтобы средний блок (2) всегда был посередине, относительно других блоков, чтобы расстояние между 1-2 и 2-3 были одинковыми. Как это реализовать? Вот пример того, что мне нужно. Теперь расстояния А и Б одинаковы всегда при изменении окна браузера: требуется
    (источник: joxi.ru)

    Отслеживать

    1,187 2 2 золотых знака 14 14 серебряных знаков 19 19 бронзовых знаков

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *