Размещаем блок по центру, используя CSS

Для центровки блока средствами CSS  оперируют его внешними отступами.

К примеру, такой CSS код будет центрировать контейнер DIV внутри родительского.

Ключевым является значение auto для левого и правого отступов.

По умолчанию, ширина блока равна 100% от родительского контейнера, потому необходимо её установить меньше этой величины (в примере это 20%). Второй важный момент — это то, что центровка с помощью margin не будет работать для inline блоков, т.е.

не будет отцентрован.

«Строчные» блоки подчиняются инструкциям выравнивания текста. Для центровки inline блока, родительский контейнер должен содержать стиль:

Тут вы можете почитать про разные варианты центровки по высоте и ширине. Для этого можно использовать не только CSS, но и HTML.

Написать комментарий

Мало букафф? Читайте есчо !

Центровка HTML с помощью абсолютного позиционирования

Октябрь 10, 2017 г.

Классическая задача о позиционировании контейнера относительно центра родительского блока. Я писал уже о некоторых простых способах установить контейнер ...

Читать

Выравнивание блока HTML (вертикально и горизонтально)

Сентябрь 17, 2015 г.

Центровка элемента - одна из типовых задач в верстке. Решать её можно по разному, рассмотрим некоторые способы. Горизонтальная центровка. С центровкой ...

Читать

 

Комментарии к «Размещаем блок по центру, используя CSS»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий:

Много комментариев в “Размещаем блок по центру, используя CSS”

  1. Валерий:

    Здравствуйте, Юрий! Ваш блог мне интересен, он несколько схож по тематике с моим. Поэтому хочу вам предложить дружить блогами, если Вы не против?! Подписываюсь на обновления, буду постоянным посетителем и комментатором. Жду новых постов. С уважением, Валерий!
    Вот мой блог: pribylwm.ru

    • Здравствуйте, Валерий.
      Не самое подходящее место для общения в комментариях. :) Тут лучше писать вопросы по публикуемым материалам. Для всего прочего — гостевая.
      Я посмотрел ваш сайт, тематика совсем у вас иная, но я конечно же не против дружить блогами. Только не очень понимаю, что это значит :).
      С вашей подборкой материалов вы добьетесь гораздо большего успеха, ведя группу во вКонтакте. Я не ставлю цель собирать подписчиков у себя, другие цели у блога.

  2. Валерий:

    А где у Вас фома подписки? Не смог найти!