6 способов центровки элементов средствами CSS


Содержание

6 способов центровки элементов средствами CSS

Существует несколько принципиально отличающихся способов для того чтобы отцентрировать объект по вертикали с помощью CSS, однако сложность может быть в выборе правильного. Мы рассмотрим некоторые из них, а также сделаем небольшой сайт, используя полученные знания.

Вертикальное выравнивание по центру с помощью CSS достигается не так просто. Существует множество способов и не все работают во всех броузерах. Давайте рассмотрим 5 различных методов, а также «за» и «против» каждого из них. Пример.

1-ый способ

Этот метод предполагает, что мы устанавливаем некоторому элементу

Плюсы

  • Контент может динамически изменять высоту (высота не определена в CSS).
  • Контент не обрезается в случае, если для него недостаточно места.

Минусы

  • Не работает в IE 7 и меньше
  • Много вложенных тэгов

2-ой метод

Этот метод использует абсолютное позиционирование div-а, которому top устанавливается в 50%, а верхний отступ (margin-top) минус половине высоты контента. Это подразумевает, что объект должен иметь фиксированную высоту, которая определена в стилях CSS.

Поскольку высота фиксированная, вы можете установить overflow:auto; для div-а содержащего контент, таким образом, в случае если контент не будет влазить, то появятся скролл-бары.

Плюсы

  • Работает во всех броузерах.
  • Нет лишней вложенности.

Минусы

  • Когда не достаточно места, контент пропадает (например, div находится внутри body, а пользователь уменьшил окна, в этом случае скролл-бары не появятся.

3-ий метод

В этом методе, мы обернём div с контентом другим div-ом. Установим ему высоту в 50% (height: 50%;), а нижний отступ половине высоты (margin-bottom:-contentheight;). Контент будет очищать float и выводиться по центру.

Плюсы

  • Работает во всех броузерах.
  • Когда недостаточно места (например, когда уменьшено окно) контент не обрезается, появятся скроллбары.

Минусы

  • Думаю только один: что используется лишний пустой элемент.

4-ый метод.

Этот метод использует свойство position:absolute; для div-а с фиксированными размерами (шириной и высотой). Затем устанавливаем ему координаты top:0; bottom:0;, но поскольку у него фиксированная высота, то он не может растянуться и выравнивается по центру. Это очень похоже на общеизвестный метод горизонтального выравнивания по центру блочного элемента фиксированной ширины (margin: 0 auto;).

Плюсы

  • Очень просто.

Минусы

  • Не работает в Internet Explorer
  • Контент будет обрезаться без скролл-баров, если не хватает места в контейнере.

5-ый метод

С помощью этого метода можно выровнять по центру одну строку текста. Просто устанавливаем высоту текста (line-height) равной высоте элемента (height). После этого строка будет выведена по центру.

Плюсы

  • Работает во всех броузерах.
  • Не обрезает текст, если он не влез.

Минусы

  • Работает только с текстом (не работает с блочными элементами).
  • Если текста больше чем одна строка, то выглядит очень плохо.

Этот способ очень полезен для небольших элементов, например чтобы вырвнять по центру текст в кнопке или в текстовом поле.

Теперь вы знаете как добиться вертикального выравнивания по центру, давайте сделаем простой web-сайт, который, в конце-концов будет выглядеть так:

Шаг 1

Всегда хорошо начинать с семантической разметки. Наша страница будет структурирована следующим образом:

  • #floater (чтобы выровнять контент по центру)
  • #centred (центральный элемент)
    • #side
      • #logo
      • #nav (список
          )
      • #content
    • #bottom (для копирайтов и всего такого)

    Напишем следующую html-разметку:

    Шаг 2

    Сейчас мы напишем простейший CSS, для размещения элементов на странице. Вы должны сохранить этот код в файле style.css. Именно на него прописана ссылка в html-файле.

    Перед тем как сделать наш контент выровненным по центру, необходимо для body и html установить высоту 100%. Так как высота считается без внутренних и внешних отступов (padding и margin), то мы устанавливаем их (отступы) в 0, чтобы не было скроллбаров.

    Нижний отступ для элемента «floater»-а равен минус половине высоты контента (400px), а именно -200px;

    Сейчас ваша страничка должна выглядеть приблизительно так:

    Ширина элемента #centered 80%. Это делает наш сайт уже на маленьких экранах и шире на больших. большинство сайтов выглядит неприлично на новых широких мониторах в верхнем левом углу. Свойства min-width и max-width также ограничивают нашу страничку, чтобы она не выглядела слишком широкой или слишком узкой. Internet Explorer не поддерживает эти свойства. Для него надо установить фиксированную ширину.

    Поскольку элементу #centered установлено position:relative, мы можем использовать абсолютное позиционирование элементов внутри него. Затем установим overflow:auto; для элемента #content, чтобы появлялись скроллбары, в случае если не будет помещаться контент.

    Шаг 3

    И последнее что мы сделаем, это добавим кое-какие стили, чтобы страничка выглядела немного привлекательнее. Давайте начнём с меню.

    Первое что мы сделали, чтобы меню выглядело лучше, удалили маркеры, установив атрибут list-style:none, а также установили внутренние и внешние отступы, так как по умолчанию в разных броузерах они сильно различаются.

    Обратите внимание, что затем мы указали чтобы ссылки отбражадись как блочные элементы. Теперь, при выводе, они растягиваются по всей ширине элемента в котором они расположены.

    Другая интересная вещь, которую мы использовали для меню — это псевдо-классы :before и :after. Они позволяют вам добавить что-нибудь перед и после элемента. Это хороший способ добавлять иконки или символы, такие как стрелочка в конце каждой ссылки. Такой трюк не работает в Internet Explorer 7 и ниже.

    Шаг 4

    Ну и самое последнее, мы добавим в наш дизайн кое-какие втили для ещё большей красоты.

    В этих стилях мы устанавливаем закруглённые углы для элемента #centered. В CSS3, за это будет отвечать свойство border-radius. Это пока что не реализовано некоторыми броузерами, разве только использовать приставки -moz и -webkit для Mozilla Firefox и Safari/Webkit.

    Совместимость

    Как вы уже наверное предположили, основной источник проблем совместимости — Internet Explorer:

    • Элементу #floater обязательно надо установить ширину
    • В IE 6 лишние отступы вокруг меню

    Каскадные таблицы стилей CSS советы & приёмы

    Смотрите также указатель всех приёмов работы.

    Центрирование

    В последних реализациях CSS вы можете также использовать возможности Уровня 3 (CSS3), позволяющие выровнять по центру абсолютно позиционированные элементы:

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

    Центрирование строк текста

    Самый распространённый и (потому) самый лёгкий тип центрирования — это центрирование строк текста в абзаце или заголовке. Для этого CSS обладает свойством ‘text-align’:

    которое отображает каждую строку в абзаце P или заголовке H2 по центру между полями, вот так:

    Все строки в этом абзаце выровнены по центру полями абзаца. Это стало возможным благодаря значению ‘center’ свойства CSS ‘text-align’.

    Центрирование блока или изображения

    Иногда центрировать нужно не текст, а блок в целом. Или, по-другому говоря: мы хотим, чтобы правое и левое поля были одинаковыми. Для этого нужно установить поля на ‘auto’. Это обычно используется для блоков с фиксированной шириной, потому что если блок сам по себе гибкий, он просто займёт всю доступную ширину. Вот пример:

    Этот довольно узкий блок текста центрирован. Заметьте, что строки внутри блока не центрированы (они выровнены влево), в отличие от предыдущего примера.

    Этот метод также можно использовать для центрирования изображения: поместите его в собственный блок и примените свойства полей. Например:

    Следующее изображение центрировано:

    Вертикальное центрирование

    Пример, приведенный ниже, демонстрирует центрирование абзаца внутри блока, который имеет определенную заданную высоту. Отдельный пример показывает абзац, который центрирован вертикально в окне браузера, потому что находится внутри блока, позиционированного абсолютно и по высоте окна.

    Этот маленький абзац центрирован вертикально.

    Центрирование по вертикали в CSS уровня 3

    Уровень 3 CSS предлагает и другие возможности. На момент написания этой статьи (2014 год), хороший способ вертикального выравнивания блока без использования абсолютного позиционирования (что может приводить к частичному перекрытию текста) всё ещё обсуждается. Но если вам известно, что частичное перекрытие текста не станет проблемой в вашем документе, вы можете использовать свойство ‘transform’, чтобы выровнять по центру абсолютно позиционированный элемент. Например:

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

    Для документа, который выглядит вот так:

    таблица стилей выглядит так:

    Основные правила:

    1. Сделайте контейнер относительно позиционированным (position: relative), что превратит его в контейнер для абсолютно позиционированных элементов.
    2. Сам элемент сделайте абсолютно позиционированным (position: absolute).
    3. Поместите элемент посередине контейнера с помощью ‘top: 50%’. (Заметьте, что ‘50%’ здесь означают 50% высоты контейнера.)
    4. Используйте translate, чтобы переместить элемент вверх на половину своей собственной высоты. ( ‘50%’ в ‘translate(0, -50%)’ указывают на высоту самого элемента.)

    Недавно (начиная приблизительно с 2015-го года) в нескольких реализациях CSS стала доступна новая техника. Она основана на новом ключевом слове ‘flex’ для свойства ‘display’. Это ключевое слово предназначено для использования в графическом интерфейсе пользователя (GUI), но ничто не мешает вам использовать его в документе, если у этого документа правильная структура.

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

    таблица стилей выглядит следующим образом:

    Вертикальное и горизонтальное центрирование в CSS уровня 3

    Мы можем расширить оба метода, чтобы центрировать по горизонтали и по вертикали одновременно.

    Побочный эффект абсолютного позиционирования абзаца состоит в том, что абзац становится ровно таким широким, каким он должен быть (если только мы явно не укажем ширину). В примере ниже мы именно этого и хотим: мы размещаем по центру абзац из одного слова (“Центр!“), так что ширина абзаца должна быть равна ширине этого слова.

    Жёлтый фон наглядно демонстрирует, что абзац действительно той же ширины, что и его содержимое. Мы подразумеваем, что разметка осталась прежней:

    В плане вертикального центрирования эта таблица стилей схожа с таблицей из предыдущего примера. Но теперь мы ещё перемещаем элемент на полпути через контейнер с помощью правила ‘left: 50%’ и одновременно сдвигаем его влево на половину своей собственной ширины в преобразовании ‘translate’:

    Следующий пример объясняет, зачем требуется правило ‘margin-right: -50%’.

    Когда форматер CSS поддерживает ‘flex’, всё становится ещё легче:

    с этой таблицей стилей:

    т.е. единственным дополнением является ‘justify-content: center’. Точно также, как ‘align-items’ определяет вертикальное выравнивание содержимого контейнера, ‘justify-content’ таким же образом определяет горизонтальное выравнивание. (На самом деле всё несколько сложнее, как следует из их названий, но в простом случае, работает это именно так.). Побочный эффект от применения свойства ‘flex’ состоит в том, что дочерний элемент, в нашем случае это Р, автоматически становится настолько малым, насколько это возможно.

    Центрирование в области просмотра в CSS уровня 3

    Контейнером по умолчанию для абсолютно позиционированных элементов является область просмотра. (В случае c браузером это окно браузера). Таким образом, центрирование элемента в области просмотра не вызывает сложности. Далее приведен полный пример. (В этом примере использован синтаксис HTML5.)

    Вы можете увидеть результат в отдельном документе.

    Правило ‘margin-right: -50%’ необходимо для компенсации ‘left: 50%’. Правило ‘left’ уменьшает доступную для элемента ширину на 50%. Поэтому визуализатор постарается сделать линии длиною не более половины ширины контейнера. Указав на то, что правое поле элемента находится правее на ту же самую величину, отметим, что максимальная длина линии снова равняется ширине контейнера.

    Попробуйте изменить размер окна: вы увидите, что каждое предложение находится на одной строке, когда окно достаточно широкое. Только тогда, когда окно слишком узкое для всего предложения, это предложение будет разбито на несколько строк. Когда вы удалите правило ‘margin-right: -50%’ и снова измените размер окна, вы заметите, что предложения будут уже разбиты, хотя окно все еще шире строк текста в два раза.

    (Использование свойства ‘translate’ для центрирования в области просмотра было впервые предложено “Charlie” в ответе на сайте Stack Overflow.)

    Created 5 May 2001;
    Last updated Вт 05 ноя 2020 19:12:56

    Центрирование блока средствами CSS. Все про CSS выравнивание

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

    Центровка элементов по горизонтали не так уж и сложна, по вертикали уже вызывает вопросы, ну а комбинирование вообще может поставить в тупик. В эру адаптивного дизайна, нам редко точно ясны размеры тех или иных элементов. Я насчитал 6 различных способов центровки элементов с помощью CSS. Начнём с простых примеров, закончим более сложными. Работать будет с одним и тем же HTML кодом:

    Горизонтальная центровка с помощью text-align

    Порой, самое простое решения является самым лучшим:

    Тут нет вертикальной центровки: для этого вам нужно будет к div-у добавить свойство margin-top и margin-bottom.

    Центровка с помощью margin: auto

    Ещё одно решения для горизонтальной центровки:

    Заметьте что для этого способа нужно выставить свойство display: block.

    Центровка с помощью table-cell

    Используя display: table-cell, мы можем обеспечить центровку элемента как по вертикали, так и по горизонтали. Но тут нам понадобится вложить изображение ещё в один элемент div.

    Чтобы всё работало корректно, div-у нужно выставить width: 100%. Для центровки элемента по вертикали, воспользуемся стандартными приёмами, выставив высоту. Работает везде, включая IE8+.

    Абсолютная центровка

    Очень интересное решение. Заключается в том, что необходимо задать высоту внешнему контейнеру:


    Центрируем с помощью translate

    Новое решение, где используются CSS трансформации. Обеспечивает как горизонтальную центровку, так и вертикальную:

    Есть несколько минусов:

    • Свойство CSS transform требует использование браузерных префиксов
    • Не работает в старых версиях IE (8 и ниже)
    • Внешнему контейнеру нужно задавать высоту.
    • Если внутри контейнера есть текст, то он может быть немного размыт.

    Центровка с помощью вида отображения flex

    Наверное самый простой вариант.

    Работает не во всех версиях IE (хотя можно подстраховать себя, используя вдобавок display: table-cell). Полный CSS:

    Центровка с помощью calc

    В некоторых случаях, данный способ более универсален чем использование flexbox:

    Всё очень просто, мы можем высчитать нужные нам размеры в зависимости от всего макета страницы. Вычисления очень просты, 50% это центральная точка контейнера, но наша задача разместить по этим координатам левый верхний угол изображения. Далее отнять по половине высоты и ширины изображения. Формула следующая:

    Top: calc(50% — (40% / 2)); left: calc(50% — (40% / 2));

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

    Данный метод поддерживается Firefox-ом, начиная с 4 версии, вам нужно будет прописать браузерные префиксы. В IE 8 не работает. Полный код:

    Надеюсь, данных методов хватит, чтобы вы нашли для себя лучшее решение.

    В процессе верстки веб-страниц достаточно часто встречается задача центрирования блоков. Это может быть как вертикальное, так и горизонтальное центрирование.

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

    Для начала поговорим о горизонтальном центрировании. Наиболее популярный прием, это когда блок центрируется установкой размеров правого и левого margin в «auto» . Допустим, мы хотим отцентрировать блок с шириной 860px. В таком случае в CSS файле нужно написать:

    #container <
    background-color:#EEE;
    width:860px;
    margin:0px auto;
    >

    Однако I.E. старых версий(5.0 например) не выровняет этот блок по центру. Конечно, такие древние браузеры уже никто не использует(из 1800 моих дневных посетителей — только 1), однако на всякий случай, лучше сделать, чтобы и там работало:)

    Для этого, родительскому элементу, т.е тому, внутри которого мы центрируем наш блок(обычно родительским элементом является тег BODY), нужно задать параметр text-align:center . В таком случае блок выровняется по центру, однако и все его содержимое, также выровняется по центру, а нам этого не нужно. Поэтому, внутри этого блока ставим выравнивание по умолчанию — text-align:left .

    #container <
    background-color:#EEE;
    width:860px;
    margin:0px auto;
    text-align:left;
    >

    Существует также другой способ горизонтального выравнивания блока, основанный на . Как Вы наверное знаете, по умолчанию, любой блочный элемент прижимается к левому краю родительского элемента. Поэтому, чтобы выровнять его по центру нужно:

    2. Сместить его вправо на 50% ширины окна браузера

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

    Таким образом, блок окажется по центру. Для большей наглядности, посмотрите ролик ниже:

    CSS код примера:

    #container <
    background-color:#559964;
    position:absolute;
    left:50%;
    margin-left:-430px;

    width:860px;
    >

    Следует отметить, что если Вы хотите спозиционировать блок не относительно окна браузера, а, например, относительно другого блока, то для этого другого блока нужно задать position:relative;

    Предположим, наш блок #container, который нужно выровнять по центру, лежит внутри блока #wrap. Тогда код будет выглядеть следующим образом:

    #container <
    background-color:#559964;
    position:absolute;
    left:50%;
    margin-left:-430px;

    width:860px;
    >

    Теперь давайте рассмотрим случай, когда нужно выровнять блок по центру страницы, т.е. применить одновременно горизонтальное и вертикальное центрирование. Здесь опять же применим позиционирование. Итак нам нужно:

    1. Задать блоку абсолютное позиционирование

    2. Сместить его вправо на 50% и вниз на 50% , тем самым поставив его верхний левый угол в центр окна браузера.

    3. Используя отрицательный отступ, сместить его вверх на расстояние, равное половине высоты блока, и влево на расстояние, равное половине ширины блока.

    Таким образом, блок окажется в центре веб-страницы.

    Допустим высота нашего блока 600px , ну а ширина 860 px . Тогда CSS код будет выглядеть следующим образом:

    #container <
    background-color:#559964;
    position:absolute;
    top:50%;

    left:50%;
    margin-top:-300px;
    margin-left:-430px;

    height:600px;
    width:860px;
    >

    Надеюсь сам принцип Вам понятен.

    Буду первым кто посмотрел урок.

    Эх. Вторая =) Недавно встретилась с этой проблемой в IE, мучалась долго)) Спасибо =)

    Спасибо, страница в закладках)))

    Большое спасибо, Андрей, за новые уроки!

    Просто спасибо,я думаю добавить тут не чего))

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

    А у меня проблема: сайт в Mozille Firefox не хочет выравниваться, прилип к левому краю и все, ничего из вышеперечисленного не помогает (то же и в Opera).

    а почему это не работает? — «если Вы хотите спозиционировать блок не относительно окна браузера, а, например, относительно другого блока, о для этого другого блока нужно задать position:relative;»

    Огромное спасибо!!просто ГИГАНТСКОЕ спасибо!Дай Бог Вам здоровья!

    Всё отлично, но только почему то все изображения встают на места только после обновления браузера. Подскажите пожалуйста -почему так происходит?

    Андрей, добавьте пожалуйста поиск по сайту.

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

    Выравнивание текста по центру

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

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

    Часто на страницах align приписывают к самому тегу. Это сразу делает код невалидным, так как W3C признал атрибут align устаревшим. Использование его на странице не рекомендуется.

    Выравнивание блока по центру

    Если нужно задать выравнивание div по центру, CSS может предложить довольно удобный способ: использование внешних отступов margin. Отступы можно задавать как блочным элементам, так и строчно-блочным. Значение свойсва должно принимать значения 0 (отступы по вертикали) и auto (автоматические отступы по горизонтали):

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

    Выравнивание блока по левому или правому краю

    Иногда выравнивание по центру CSS-способом не требуется, зато надо поставить два блока рядом: один с левого края, другой — с правого. Для этого существует свойство float, которое может принимать одно из трех значений: left, right или none. Допустим, у вас есть два блока, которые надо поставить рядом. Тогда код будет таким:

    Если есть еще и третий блок, который должен располагаться под первыми двумя блоками (например, футер), то ему необходимо прописать свойство clear:

    Дело в том, что блоки с классами left и right выпадают из общего потока, то есть все остальные элементы игнорируют само существование выравненных элементов. Свойство clear:both позволяет футеру или любому другому блоку видеть выпавшие из потока элементы и запрещает обтекание (float) как слева, так и справа. Поэтому в нашем примере футер сместится вниз.

    Вертикальное выравнивание

    Бывают случаи, когда недостаточно задать выравнивание по центру CSS-способами, необходимо еще изменить вертикальное положение дочернего блока. Любой строчный или строчно-блочный элемент может быть прижат к верхнему или нижнему краю, находиться посередине родительского элемента или находиться в произвольном месте. Чаще всего требуется выравнивание блока по центру, для этого используется атрибут vertical-align. Допустим, есть два блока, один вложен в другой. При этом внутренний блок — строчно-блочный элемент (display: inline-block). Необходимо выровнять блок child по вертикали:

    • выравнивание по верхней границе — .child;
    • выравнивание по центру — .child;
    • выравнивание по нижней границе — .child;

    На блочные элементы ни text-align, ни vertical-align не действуют.

    Возможные проблемы с выровненными блоками

    Иногда выравнивание div по центру CSS-способом может вызвать небольшие проблемы. Например, при использовании float: допустим, есть три блока: .first, .second и.third. Второй и третий блоки лежат в первом. Элемент с классом second выровнен по левому краю, а последний блок — по правому. После выравнивания оба выпали из потока. Если у родительского элемента не задана высота (например, 30em), то он перестанет растягиваться по высоте дочерних блоков. Чтобы избежать этой ошибки, используют «распорку» — специальный блок, который видит.second и.third. CSS-код:

    Часто используются псевдокласс:after, который тоже позволяет вернуть блоки на место с помощью создания псевдораспорки (в примере в div с классом container лежит внутри.first и содержит.left и.right):

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

    Другая проблема, с которой часто сталкиваются верстальщики, — выравнивание строчно-блочных элементов. После каждого из них автоматически добавляется пробел. Справиться с этим помогает свойство margin, которому задается отрицательный отступ. Есть и другие способы, которые используются значительно реже: например, обнуление В этом случае в свойствах родительского элемента прописывается font-size:0. Если внутри блоков располагается текст, то в свойствах строчно-блочных элементов уже возвращается нужный размер шрифта. Например, font-size:1em. Способ удобен не всегда, поэтому гораздо чаще используется вариант со внешними отступами.

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

    При создании макета веб-страницы, вы, вероятно, сталкивались с ситуацией, когда вам нужно отцентрировать div по горизонтали и вертикали, используя CSS. Есть несколько способов с применением CSS и JQuery.

    Но вначале основы:

    Выравнивание по горизонтали средствами CSS

    Class-name <
    margin:0 auto;
    width:200px;
    height:200px;
    >

    Для центрирования div только по горизонтали, необходимо указать ширину и автоматическое значение для левого и правого margins (это сокращенная форма написания CSS-свойств). Этот метод работает на блочных элементов (div, p, h1 и т. п.). Чтобы применить его для линейных элементов (например, гиперссылок и изображений), необходимо написать еще одно правило — display:block .

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

    Одновременное центрирование div по по горизонтали и вертикали чуть более хитрое. Вам нужно заранее знать размеры div .

    Class-name <
    width:300px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-100px 0 0 -150px;
    >

    С помощью абсолютного позиционирования элементов, мы можем выдернуть его из потока и задать его позицию по отношению к окну браузера. Задав смещение div на 50% от левой и верхней части окна, мы центрируем левый верхний угол относительно страницы. Единственное, что нам осталось сделать, это сместить div влево и вверх на половину его ширины и высоты, задав отрицательные значения margin , чтобы он идеально располагался по центру.

    Выравнивание по горизонтали и вертикали с помощью jQuery

    Как уже говорилось, вышеуказанный метод CSS работает только с div -ом фиксированного размера. На помощь приходит JQuery:

    // объявление функции:
    $(window).resize(function() <
    $(«.class-name»).css( <
    position:»absolute»,
    left: ($(window).width() — $(«.class-name»).outerWidth())/2,
    top: ($(window).height() — $(«.class-name»).outerHeight())/2
    >);
    >);
    // вызов функции:
    $(window).resize();

    Функция вычисляет ширину окна в $(window).resize() всякий раз при каждом изменении размера окна пользователем. Мы используем outerWidth() и outerHeight() , потому что в отличие от обычной width() и height() , они добавляют padding и ширину border , возвращая размер. Наконец, мы адаптируем при изменении размеров окна и центрируем div при перезагрузке страницы.

    При создании div блоков, наверняка вы сталкивались с ситуациями, где необходимо центрировать ваш div горизонтально и вертикально, с помощью чистого CSS. Например, при создании всплывающих окон с . Существует несколько способов реализовать центрирование, и в этой статье я расскажу о моих любимых и простых способах, с помощью CSS или jQuery.

    Для начала, основы:

    Горизонтальное центрирование на CSS

    Это делается просто, мы используем margin для нашего div блока.

    Для центрирования div блока только горизонтально, вам необходимо определить ширину блока (width), использовать свойство auto для отступов (margin) слева и справа . Этот метод будет работать для всех блочных элементов (div, p, h1, и так далее…). Для применения горизонтального центрирования для строковых элементов (ссылки, картинки…), вам необходимо применить параметр display: block;

    Горизонтальное и вертикальное центрирование на CSS

    Центрирование div блока по горизонтали и вертикали одновременно, немного замысловатее. Вам необходимо знать размеры div блока преждевременно.

    С помощью абсолютного позиционирования блока, мы можем отсоединить его от окружающих элементов и определить его позицию в отношении к размеру окна браузера. Перемещаем div блок на 50% слева и сверху окна. Теперь верхний левый угол блока находится в центре окна браузера. Остается установить div блок в центре страницы с помощью перемещения его на половину его ширины влево и половину его высоты вверх. Ура! Получилось превосходное центрирование блока на чистом css коде.

    Горизонтальное и вертикальное центрирование на jQuery

    Как упоминалось ранее – CSS метод центрирования работает только с фиксированными размерами. Если размеры не определены, на помощь придет jQuery метод:

    Функционирование данного метода заключается в запуске функции resize(), с помощью строки $(window).resize() . Эта функция работает всегда, когда изменяется размер окна браузера. Мы используем outerWidth() и outerHeight() , потому что в противовес width() и height() , они включают отступы и толщину рамок в размер, который возвращается ими. Последняя строка, запускает процесс центрирования div блока при загрузке страницы.

    Преимущество использования этого метода в том, что вы можете не знать, какой размер div блока. Главный недостаток – это работоспособность только при включенном JavaScript. Поэтому этот метод приемлем для многофункциональных интерфейсов, таких как Вконтакте, Facebook и т.д.

    Центрирование инлайновых элементов

    Нужно сделать такое.
    1. Красный элемент имеет 100% ширину, т.е. он резиновый
    2. черные элементы, это блоки со свойством inline-block, имеющие фиксированный размер.

    Так они выстраиваются в случае, если мы родителю задаем text-align:center, но, если мы так делаем, то эти элементы приравниваются к левому краю родителя ессесено =), мне нужно, что бы они в этот момент были еще и по центру красного элемента. Учитывайте, что невозможно заранее узнать ширину, она процентная.
    В общем вот, использование flex технологии, это поможет, но мне нужно без нее, для ие старых.
    Можно такое провернуть без использования java и дополниитеьлных элементов?

    11.07.2013, 13:32

    Центрирование
    Дано: блок-контейнер, внутри инлайн-блочные элементы в несколько строк. Задача: блок должен быть.

    Центрирование таблицы
    Обычно для центрирования таблицы я писал так:

    Центрирование теней
    Тень создается с помощью кода:

    11.07.2013, 13:47 2 11.07.2013, 14:02 [ТС] 3

    Добавлено через 1 минуту
    Видимо я не правильно или не полно описал задачу, мне нужно что бы элементы были РОВНО по центру, вне зависимости от того сколько их на строке, НО последняя строка должна быть прижата к левому краю.
    Эмитация свойства text-align-last: left

    Добавлено через 51 секунду
    А маргин 0 авто выравнивает не элементы, а сам родительский контейнер, что мне вообще не нужно =)

    Выравнивание по центру в CSS

    Выравнивание элементов по центру в CSS — это одна из самых популярных причин чтобы пожаловаться на CSS. «Почему всё так сложно?» — возмущаются они. Мне кажется, что проблема заключается не в том что это трудно сделать, а в том что способов для выравнивания элементов по центру очень много и бывает достаточно сложно выбрать из них подходящий.

    Давайте выстроим все возможные решения в виде древовидной схемы и будем надеяться, что это упростит нашу задачу.

    Итак, мне нужно выравнять элемент по центру.

    Горизонтальное выравнивание

    Выравнивание по центру строкового или строково-* элемента

    Выравнивать по центру строковые элементы внутри блочного родительского элемента можно достаточно просто:

    Это будет работать для inline , inline-block , inline-table , inline-flex , и т. д.

    Выравнивание по центру блочного элемента

    Выравнять по центру блочный элемент вы можете установив свойствам margin-left и margin-right значение auto (у него также должна быть задана ширина, иначе элемент просто займёт всю ширину контента и не будет необходимости в выравнивании). Чаще всего это делается с помощью сокращённого свойства, вот так:

    Это будет работать независимо от того какая ширина установленная у блочного элемента или его родителя.

    Обратите внимание, что вы не сможете обтекать элемент выравненный по центру таким способом. Однако и для этого есть трюк.

    Выравнивание по центру нескольких блочных элементов

    Если есть два или более блочных элементов, которые вам нужно выравнять горизонтально по центру в пределах одной строки, то возможно вам лучше изменить их тип отображения. Ниже приведён пример изменения их типа отображения на inline-block и пример с Flexbox:

    Если эти несколько блоков расположены на разных строках, то техника с автоматическими отступами по прежнему прекрасна:

    Вертикальное выравнивание

    Вертикальное выравнивание по центру в CSS немного сложнее.

    Выравнивание по центру строкового или строково-* элемента

    Выравнивание элемента с одной строкой

    Иногда строковые/текстовые элементы могут выравниваться по центру просто потому что у них одинаковое значения для свойств padding-top и padding-bottom .

    Если для вас по каким-то причинам padding — это не вариант, а вы пытаетесь выровнять по центру некоторый текст и точно знаете, что он не будет обёрнут чем-то ещё, то есть есть небольшой трюк, суть которого заключается в том чтобы установить свойство line-height равным значению высоты элемента.

    Выравнивание многострочного элемента

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

    Если это что-то похожее на таблицу, возможно вы сможете использовать Flexbox ? Отдельный Flex-элемент может быть легко расположен по центру внутри Flex-контейнера.

    Помните, что это на самом деле актуально когда у контейнера есть фиксированная высота ( px , % , и другие), вот почему здесь у контейнера задана высота.

    Если обе техники приведённые выше нельзя применить, вы можете использовать технику «призрачного элемента», в которой псевдоэлемент с высотой в 100% размещается внутри контейнера и тех выравнивается вертикально по центру него.

    Выравнивание по центру блочного элемента

    Выравнивание элемента с известной высотой

    Довольно часто мы не можем знать высоту, по многим причинам: если изменяется ширина, текст может форматироваться и изменять высоту. Разная стилизация текста может изменять высоту. Разный размер шрифта может изменить высоту. Элементы с фиксированным соотношением сторон, такие как изображения, могут изменять высоту при изменении собственных размеров и т.д.

    Но если вы знаете высоту элемента, то можете выравнивать по центру вот так:

    Выравнивание элемента с неизвестной высотой

    Даже если вы не знаете высоту элемента, его всё ещё можно протолкнуть на 50% высоты его родителя, а после поднять на 50% его собственной высоты:

    Выравнивание элемента с помощью Flexbox

    Небольшой сюрприз, это можно очень просто сделать с помощью Flexbox.

    Горизонтальное и вертикальное выравнивание

    Вы можете комбинировать представленные выше техники для того чтобы получить идеально выравненные по центру элементы. Но обычно их можно разделить на 4 группы:

    Выравнивание элемента с фиксированной шириной и высотой

    Использование отрицательных отступов ( maring ) равных половине этой ширины и высоты после абсолютного позиционирования элемента 50% / 50% выравняют элемент по центру. У этого способа достаточно хорошая кроссбраузерная поддержка:

    Выравнивание элемента с неизвестной шириной и высотой

    Если вы не знаете ширину или высоту элемента, то можете использовать свойство transform и отрицательный translate в 50% в обоих направлениях (в зависимости от текущей ширины / высоты элемента) до центра:

    Выравнивание элемента с помощью Flexbox

    Чтобы выровнять элемент по центру с помощью Flexbox вам нужно использовать два свойства центрирования:


    Выравнивание элемента с помощью CSS Grid

    Это просто небольшой трюк (присланный Lance Janssen), который в большей степени будет работать для одного элемента:

    Вывод

    Теперь вы можете всё что угодно выравнять по центру в CSS.

    Все способы вертикального выравнивания в CSS. Центрирование блока средствами CSS

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

    Центровка элементов по горизонтали не так уж и сложна, по вертикали уже вызывает вопросы, ну а комбинирование вообще может поставить в тупик. В эру адаптивного дизайна, нам редко точно ясны размеры тех или иных элементов. Я насчитал 6 различных способов центровки элементов с помощью CSS. Начнём с простых примеров, закончим более сложными. Работать будет с одним и тем же HTML кодом:

    Горизонтальная центровка с помощью text-align

    Порой, самое простое решения является самым лучшим:

    Тут нет вертикальной центровки: для этого вам нужно будет к div-у добавить свойство margin-top и margin-bottom.

    Центровка с помощью margin: auto

    Ещё одно решения для горизонтальной центровки:

    Заметьте что для этого способа нужно выставить свойство display: block.

    Центровка с помощью table-cell

    Используя display: table-cell, мы можем обеспечить центровку элемента как по вертикали, так и по горизонтали. Но тут нам понадобится вложить изображение ещё в один элемент div.

    Чтобы всё работало корректно, div-у нужно выставить width: 100%. Для центровки элемента по вертикали, воспользуемся стандартными приёмами, выставив высоту. Работает везде, включая IE8+.

    Абсолютная центровка

    Очень интересное решение. Заключается в том, что необходимо задать высоту внешнему контейнеру:

    Центрируем с помощью translate

    Новое решение, где используются CSS трансформации. Обеспечивает как горизонтальную центровку, так и вертикальную:

    Есть несколько минусов:

    • Свойство CSS transform требует использование браузерных префиксов
    • Не работает в старых версиях IE (8 и ниже)
    • Внешнему контейнеру нужно задавать высоту.
    • Если внутри контейнера есть текст, то он может быть немного размыт.

    Центровка с помощью вида отображения flex

    Наверное самый простой вариант.

    Работает не во всех версиях IE (хотя можно подстраховать себя, используя вдобавок display: table-cell). Полный CSS:

    Центровка с помощью calc

    В некоторых случаях, данный способ более универсален чем использование flexbox:

    Всё очень просто, мы можем высчитать нужные нам размеры в зависимости от всего макета страницы. Вычисления очень просты, 50% это центральная точка контейнера, но наша задача разместить по этим координатам левый верхний угол изображения. Далее отнять по половине высоты и ширины изображения. Формула следующая:

    Top: calc(50% — (40% / 2)); left: calc(50% — (40% / 2));

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

    Данный метод поддерживается Firefox-ом, начиная с 4 версии, вам нужно будет прописать браузерные префиксы. В IE 8 не работает. Полный код:

    Надеюсь, данных методов хватит, чтобы вы нашли для себя лучшее решение.

    Постановка задачи: необходимо задать вертикальное выравнивание для inline или inline-block элементов внутри блочного элемента.

    Подходы к решению задачи. Существуют различные способы, рассмотрим основные из них:

    1. Представить блочный элемент как ячейку таблицы (display: table-cell ).
    2. IE6-7: метод expression.
    3. Приравнивание межстрочного интервала (свойство line-height ) и высоты блока (для однострочных элементов).
    4. Позиционирование при помощи внешнего блока (position:absolute ).

    Ну а подведя итоги, рассмотрим еще один метод:

    5. Выравнивание с помощью свойства vertical-align.

    display: table-cell

    Для вертикального выравнивания применяется свойство display: table-cell родительскому блоку, которое заставляет элемент эмулировать ячейку таблицы. Ему же задается высота и vertical-align: middle :

    Вертикальное выравнивание. Способ display: table-cell

    Центрирование блока средствами CSS. Вертикальное выравнивание элементов с помощью CSS

    Существует несколько принципиально отличающихся способов для того чтобы отцентрировать объект по вертикали с помощью CSS, однако сложность может быть в выборе правильного. Мы рассмотрим некоторые из них, а также сделаем небольшой сайт, используя полученные знания.

    Вертикальное выравнивание по центру с помощью CSS достигается не так просто. Существует множество способов и не все работают во всех броузерах. Давайте рассмотрим 5 различных методов, а также «за» и «против» каждого из них. Пример.

    1-ый способ

    Этот метод предполагает, что мы устанавливаем некоторому элементу

    Плюсы

    • Контент может динамически изменять высоту (высота не определена в CSS).
    • Контент не обрезается в случае, если для него недостаточно места.

    Минусы

    • Не работает в IE 7 и меньше
    • Много вложенных тэгов

    2-ой метод

    Этот метод использует абсолютное позиционирование div -а, которому top устанавливается в 50%, а верхний отступ (margin-top) минус половине высоты контента. Это подразумевает, что объект должен иметь фиксированную высоту, которая определена в стилях CSS.

    Поскольку высота фиксированная, вы можете установить overflow:auto; для div -а содержащего контент, таким образом, в случае если контент не будет влазить, то появятся скролл-бары.

    Плюсы

    • Работает во всех броузерах.
    • Нет лишней вложенности.

    Минусы

    • Когда не достаточно места, контент пропадает (например, div находится внутри body , а пользователь уменьшил окна, в этом случае скролл-бары не появятся.

    3-ий метод

    В этом методе, мы обернём div с контентом другим div -ом. Установим ему высоту в 50% (height: 50%;), а нижний отступ половине высоты (margin-bottom:-contentheight;). Контент будет очищать float и выводиться по центру.

    Плюсы

    • Работает во всех броузерах.
    • Когда недостаточно места (например, когда уменьшено окно) контент не обрезается, появятся скроллбары.

    Минусы

    • Думаю только один: что используется лишний пустой элемент.

    4-ый метод.

    Этот метод использует свойство position:absolute; для div -а с фиксированными размерами (шириной и высотой). Затем устанавливаем ему координаты top:0; bottom:0; , но поскольку у него фиксированная высота, то он не может растянуться и выравнивается по центру. Это очень похоже на общеизвестный метод горизонтального выравнивания по центру блочного элемента фиксированной ширины (margin: 0 auto;).

    Плюсы

    • Очень просто.

    Минусы

    • Не работает в Internet Explorer
    • Контент будет обрезаться без скролл-баров, если не хватает места в контейнере.

    5-ый метод

    С помощью этого метода можно выровнять по центру одну строку текста. Просто устанавливаем высоту текста (line-height) равной высоте элемента (height). После этого строка будет выведена по центру.

    Плюсы

    • Работает во всех броузерах.
    • Не обрезает текст, если он не влез.

    Минусы

    • Работает только с текстом (не работает с блочными элементами).
    • Если текста больше чем одна строка, то выглядит очень плохо.

    Этот способ очень полезен для небольших элементов, например чтобы вырвнять по центру текст в кнопке или в текстовом поле.

    Теперь вы знаете как добиться вертикального выравнивания по центру, давайте сделаем простой web-сайт, который, в конце-концов будет выглядеть так:

    Шаг 1

    Всегда хорошо начинать с семантической разметки. Наша страница будет структурирована следующим образом:

    • #floater (чтобы выровнять контент по центру)
    • #centred (центральный элемент)
      • #side
        • #logo
        • #nav (список
        • #content
      • #bottom (для копирайтов и всего такого)

      Напишем следующую html-разметку:

      A Centred Company

      • Home
      • Products
      • Blog
      • Contact
      • About

      Page Title

      Holisticly re-engineer value-added outsourcing after process-centric collaboration and idea-sharing. Energistically simplify impactful niche markets via enabled imperatives. Holisticly predominate premium innovation after compelling scenarios. Seamlessly recaptiualize high standards in human capital with leading-edge manufactured products. Distinctively syndicate standards compliant schemas before robust vortals. Uniquely recaptiualize leveraged web-readiness vis-a-vis out-of-the-box information.

      Heading 2

      Efficiently embrace customized web-readiness rather than customer directed processes. Assertively grow cross-platform imperatives vis-a-vis proactive technologies. Conveniently empower multidisciplinary meta-services without enterprise-wide interfaces. Conveniently streamline competitive strategic theme areas with focused e-markets. Phosfluorescently syndicate world-class communities vis-a-vis value-added markets. Appropriately reinvent holistic services before robust e-services.

      Центрирование элемента css. Центрирование блока средствами CSS

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

      Начнем с общего описания задачи.

      Задача вертикального центрирования

      Горизонтальное центрирование выполняется очень просто и легко. Когда центрируемый элемент является строчным, используем свойство выравнивания относительно родительского элемента. Когда элемент блочный — задаем ему ширину и автоматическую установку левого и правого полей.

      Большинство людей, используя свойство text-align: , обращаются к свойству vertical-align для центрирования по вертикали. Все выглядит достаточно логично. Если вы использовали табличные шаблоны, то наверняка активно использовали атрибут valign , который укрепляет веру в то, что vertical-align правильный путь к решению задачи.

      Но атрибут valign работает только в ячейках таблицы. А свойство vertical-align очень на него похоже. Оно также действует на ячейки таблицы и некоторые строчные элементы.

      Значение свойства vertical-align действует по отношению к родительскому строчному элементу.

      • В строке текста выравнивание производится по отношению к высоте строки.
      • В ячейке таблицы используется выравнивание по отношению к величине, вычисляемой специальным алгоритмом (обычно получается высота строки).

      Но, к сожалению, свойство vertical-align не действует в блочных элементах (например, параграфах внутри элемента div ). Такое положение может привести к мысли, что решения задачи вертикального выравнивания нет.

      Но есть другие методы центрирования блочных элементов, выбор которых зависит от того, что центрируется по отношению к внешнему контейнеру.

      Метод line-height

      Данный метод работает, когда вы хотите центрировать вертикально одну строчку текста. Все что нужно сделать — это задать высоту строки больше, чем размер шрифта.

      По умолчанию свободное пространство будет распределено равномерно сверху и снизу текста. И строка будет отцентрирована вертикально. Часто высоту строки делают равной высоте элемента .

      Данный метод работает во всех браузерах, хотя использовать его можно только для одной строки. Значение 200 px в примере выбрано произвольно. Можно использовать любые величины больше размера шрифта текста.

      Центрирование изображения с помощью line-height

      А что если содержание представляет собой картинку? Будет ли выше описанный метод работать? Ответ заключается в еще одной строчке кода CSS.

      Значение свойства line-height должно быть больше высоты изображения.

      Метод таблиц CSS

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

      Примечание: Таблица CSS не является тем же, что и HTML таблица.

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

      В отличие от описанного выше метода, в данном случае содержание может быть динамическим, так как элемент div будет изменять размер в соответствии со своим содержанием.

      Недостатком данного метода является то, что он не работает в старых версиях IE. Приходится использовать свойство display: inline-block для вложенного контейнера.

      Абсолютное позиционирование и отрицательные поля

      Данный метод также работает во всех браузерах. Но он требует, чтобы центрируемому элементу задавалась высота.


      В коде примера выполняется одновременное центрирование по горизонтали и вертикали:

      Сначала устанавливаем тип позиционирования элементов. Затем для вложенного элемента div устанавливаем значения свойств top и left равными 50%, что соответствует центру родительского элемента. Но в центр попадает левый верхний угол вложенного элемента. Поэтому нужно поднять его вверх (на половину высоты) и сдвинуть влево (на половину ширины), и тогда центр совпадет с центром родительского элемента. Так что знание высоты элемента в данном случае необходимо. Затем задаем элементу отрицательные значения верхнего и левого полей равными половине высоты и ширины соответственно.

      Данный метод работает не во всех браузерах.

      Абсолютное позиционирование и растягивание

      В коде примера выполняется центрирование по вертикали и горизонтали.

      Идея данного метода заключается в том, чтобы растянуть вложенный элемент до всех 4 границ родительского элемента с помощью установки свойствам top, bottom, right, и left значения 0.

      Установка автоматического формирования полей по всем сторонам приведет к заданию равных значений по всем 4 сторонам и выведет наш вложенный элемент div по центру родительского элемента.

      К сожалению, данный метод не работает в IE7 и ниже.

      Равные отступы сверху и снизу

      В данном методе явно задаются равные отступы сверху и снизу от родительского элемента.

      В коде CSS примера отступы сверху и снизу задаются для обоих элементов. Для вложенного элемента установка отступов будет служить для вертикального центрирования. А отступы родительского элемента будут центрировать вложенный элемент в нём.

      Для динамического изменения размеров элементов используются относительные единицы измерения. А для абсолютных единиц измерения придется проделать расчеты.

      Например, если родительский элемент имеет высоту 400 px, а вложенный элемент — 100px, то необходимы отступы 150px сверху и снизу.

      150 + 150 + 100 = 400

      Использование % позволяет расчеты оставить браузеру.

      Данный метод работает везде. Обратной стороной является необходимость в расчетах.

      Примечание: Данный метод работает за счет установки внешних отступов элемента. Вы можете также использовать поля внутри элемента. Решение о применении полей или отступов нужно принимать в зависимости от специфики проекта.

      Плавающий div

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

      Мы смещаем пустой div влево или вправо и задаем для него высоту 50% родительского элемента. Таким образом, он будет заполнять верхнюю половину родительского элемента.

      Так как данный div является плавающим, то он удаляется из обычного потока документа, и нам нужно отменить обтекание текстом для вложенного элемента. В примере используется clear: both , но вполне достаточно использовать тоже направление, что и смещение плавающего пустого элемента div .

      Верхняя граница вложенного элемента div находится непосредственно под нижней границей пустого элемента div . Нам нужно сместить вложенный элемент вверх на половину высоты плавающего пустого элемента. Для решения задачи используется отрицательное значение свойства margin-bottom для плавающего пустого элемента div .

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

      Заключение

      Все описанные методы просты в использовании. Трудность заключается в том, что ни один из них не подходит для всех случаев. Нужно анализировать проект и выбирать тот, который подходит наилучшим образом под требования.

      В CSS некоторые на первый взгляд простые вещи оказывается не так-то просто выполнить. Одной из таких вещей, является выравнивание, т.е. когда один элемент необходимо расположить определённым образом относительного другого.

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

      Примечание: под каждым решением приведен список браузеров с указанием версий, в которых указанный CSS код работает.

      CSS — Выравнивание блока по центру

      1. Выравнивание одного блока по центру другого. При этом первый и второй блок имеют динамические размеры.

      • Chrome 4.0+
      • Firefox 3.6+
      • Internet Explorer 9+
      • Opera 10.5+
      • Safari 3.1+

      2. Выравнивание одного блока по центру другого. При этом второй блок имеет фиксированные размеры.

      Браузеры, которые поддерживают данное решение:

      • Chrome 1.0+
      • Firefox 1.0+
      • Internet Explorer 4.0+
      • Opera 7.0+
      • Safari 1.0+

      3. Выравнивание одного блока по центру другого. При этом второй блок имеет размеры, заданные в процентах.

      Браузеры, которые поддерживают данное решение:

      • Chrome 1.0+
      • Firefox 1.0+
      • Internet Explorer 4.0+
      • Opera 7.0+
      • Safari 1.0+

      CSS — Выравнивание по горизонтали

      1. Выравнивание одного блочного элемента (display: block) относительно другого (в котором он расположен) по горизонтали:

      Браузеры, которые поддерживают данное решение:

      • Chrome 1.0+
      • Firefox 1.0+
      • Internet Explorer 6.0+
      • Opera 3.5+
      • Safari 1.0+

      2. Выравнивание строчного (display: inline) или строчно-блочного (display: inline-block) элемента по горизонтали:

      Браузеры, которые поддерживают данное решение:

      • Chrome 1.0+
      • Firefox 3.0+
      • Internet Explorer 8.0+
      • Opera 7.0+
      • Safari 1.0+

      CSS — Выравнивание по вертикали

      1. Отцентровать один элемент (display: inline , display: inline-block) относительно другого (в котором он расположен) по центру. Родительский блок в этом примере имеет фиксированную высоту, которая задаётся с помощью свойства CSS line-height .

      Браузеры, которые поддерживают данное решение:

      • Chrome 1.0+
      • Firefox 3.0+
      • Internet Explorer 8.0+
      • Opera 7.0+
      • Safari 1.0+

      2. Центрирования одного блока относительно другого по вертикали посредством представления родителя как таблицы, а ребёнка как ячейки этой таблицы.

      Браузеры, которые поддерживают данное решение:

      • Chrome 1.0+
      • Firefox 1.0+
      • Internet Explorer 8.0+
      • Opera 7.5+
      • Safari 1.0+

      Если Вы знаете какие-нибудь другие интересные хитрости или полезные готовые решения по выравниванию, то поделитесь ими в комментариях.

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

      Да, для вертикального выравнивания в CSS есть специальное свойство vertical-align с множеством значений . Однако на практике оно работает совсем не так, как ожидается. Давайте попробуем в этом разобраться.

      Сравним следующие подходы. Выравнивание с помощью:

      • таблицы,
      • отступов,
      • line-height ,
      • растягивания,
      • отрицательного margin ,
      • transform ,
      • псевдоэлемента,
      • flexbox .

      В качестве иллюстрации рассмотрим следующий пример.

      Есть два элемента div , при этом один из них вложен в другой. Дадим им соответствующие классы − outer и inner .

      Для начала рассмотрим случай, когда размеры внешнего и внутреннего блока известны . Добавим внутреннему элементу правило display: inline-block , а внешнему − text-align: center и vertical-align: middle .

      Нпомню, что выравнивание применяется только к элементам, которые имеют режим отображения inline или inline-block .

      Зададим блокам размеры, а также фоновые цвета, чтобы видеть их границы.

      Почему так произошло? Дело в том, что свойство vertical-align влияет на выравнивание самого элемента, а не его содержимого (кроме случаев, когда оно применяется к ячейкам таблицы). Поэтому применение данного свойства к внешнему элементу ничего не дало. Более того, применение этого свойства к внутреннему элементу также ничего не даст, поскольку строчные блоки (inline-block) выравниваются по вертикали относительно соседних блоков, а в нашем случае у нас один строчный блок.

      Для решения данной проблемы существует несколько техник. Ниже подробнее рассмотрим каждую из них.

      Выравнивание с помощью таблицы

      http://jsfiddle.net/c1bgfffq/1/

      Очевидный минус данного решения – с точки зрения семантики неправильно применять таблицы для выравнивания. Второй минус в том, что для создания таблицы требуется добавить еще один элемент вокруг внешнего блока.

      Первый минус можно частично убрать, заменив теги table и td на div и задав табличный режим отображения в CSS.

      Выравнивание с помощью отступов

      Минус решения — оно применимо лишь в ограниченном числе случаев, когда известны высоты обоих блоков.

      Выравнивание с помощью line-height

      Также данную технику можно применять и для выравнивания многострочного текста, если для внутреннего блока переопределить значение line-height , а также добавить правила display: inline-block и vertical-align: middle .

      Минус данного способа заключается в том, что должна быть известна высота внешнего блока.

      Выравнивание с помощью «растягивания»

      Для этого нужно:

      1. задать внешнему блоку относительное позиционирование, а внутреннему − абсолютное;
      2. добавить внутреннему блоку правила top: 0 и bottom: 0 , в результате чего он растянется на всю высоту внешнего блока;
      3. установить значение auto для вертикальных отступов внутреннего блока.

      .outer < position: relative; >.inner < height: 100px; position: absolute; top: 0; bottom: 0; margin: auto 0; >
      http://jsfiddle.net/c1bgfffq/4/

      Суть этой техники заключается в том, что задание высоты для растянутого и абсолютно спозиционированного блока заставляет браузер вычислять вертикальные отступы в равном соотношении, если их значение установлено в auto .

      Выравнивание с помощью отрицательного margin-top

      Нужно задать внешнему блоку относительное позиционирование, а внутреннему − абсолютное. Затем необходимо сдвинуть внутренний блок вниз на половину высоты внешнего блока top: 50% и поднять вверх на половину собственной высоты margin-top: -H inner / 2.

      Минус данного способа — должна быть известна высота внутреннего блока.

      Выравнивание с помощью transform

      Почему в предыдущем способе нельзя было задать значение в процентах? Так как процентные значения свойства margin вычисляются относительно родительского элемента, значение в 50% равнялось бы половине высоты внешнего блока, а нам нужно было поднять внутренний блок на половину его собственной высоты. Для этого как раз подходит свойство transform .

      Минус данного способа — он не может быть применен, если внутренний блок имеет абсолютное позиционирование.

      Выравнивание с помощью Flexbox

      Внешнему блоку необходимо задать display: flex , а внутреннему − margin: auto . И это все! Красиво, правда?

      Минус данного способа − Flexbox поддерживается только современными браузерами.

      Какой способ выбрать?

      Теги: Добавить метки

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

      Центровка элементов по горизонтали не так уж и сложна, по вертикали уже вызывает вопросы, ну а комбинирование вообще может поставить в тупик. В эру адаптивного дизайна, нам редко точно ясны размеры тех или иных элементов. Я насчитал 6 различных способов центровки элементов с помощью CSS. Начнём с простых примеров, закончим более сложными. Работать будет с одним и тем же HTML кодом:

      Горизонтальная центровка с помощью text-align

      Порой, самое простое решения является самым лучшим:

      Тут нет вертикальной центровки: для этого вам нужно будет к div-у добавить свойство margin-top и margin-bottom.

      Центровка с помощью margin: auto

      Ещё одно решения для горизонтальной центровки:

      Заметьте что для этого способа нужно выставить свойство display: block.

      Центровка с помощью table-cell

      Используя display: table-cell, мы можем обеспечить центровку элемента как по вертикали, так и по горизонтали. Но тут нам понадобится вложить изображение ещё в один элемент div.

      Чтобы всё работало корректно, div-у нужно выставить width: 100%. Для центровки элемента по вертикали, воспользуемся стандартными приёмами, выставив высоту. Работает везде, включая IE8+.

      Абсолютная центровка

      Очень интересное решение. Заключается в том, что необходимо задать высоту внешнему контейнеру:

      Центрируем с помощью translate

      Новое решение, где используются CSS трансформации. Обеспечивает как горизонтальную центровку, так и вертикальную:

      Есть несколько минусов:

      • Свойство CSS transform требует использование браузерных префиксов
      • Не работает в старых версиях IE (8 и ниже)
      • Внешнему контейнеру нужно задавать высоту.
      • Если внутри контейнера есть текст, то он может быть немного размыт.

      Центровка с помощью вида отображения flex

      Наверное самый простой вариант.

      Работает не во всех версиях IE (хотя можно подстраховать себя, используя вдобавок display: table-cell). Полный CSS:

      Центровка с помощью calc

      В некоторых случаях, данный способ более универсален чем использование flexbox:

      Всё очень просто, мы можем высчитать нужные нам размеры в зависимости от всего макета страницы. Вычисления очень просты, 50% это центральная точка контейнера, но наша задача разместить по этим координатам левый верхний угол изображения. Далее отнять по половине высоты и ширины изображения. Формула следующая:

      Top: calc(50% — (40% / 2)); left: calc(50% — (40% / 2));

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

      Данный метод поддерживается Firefox-ом, начиная с 4 версии, вам нужно будет прописать браузерные префиксы. В IE 8 не работает. Полный код:

      Надеюсь, данных методов хватит, чтобы вы нашли для себя лучшее решение.

      У дизайнера иногда возникает вопрос: как центрировать элементы по вертикали ? И это вызывает определенные проблемы. Однако существует несколько методов для центрирования элементов по вертикали и каждый из этих методов достаточно прост. В этой статьи описаны некоторые из этих методов.

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

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

      Vertical-Align

      Горизонтальное центрирование элемента достаточно легко реализовать (с помощью CSS). Встроенный элемент (inline) можно центрировать по горизонтали, назначив родительскому контейнеру свойство text-align со значением center . Когда элемент блочный, для центрирования ему достаточно задать ширину (width) и установить значения правого (margin-right) и левого (margin-left) поля на auto .

      Относительно к тексту: многие для центрирования начинают использовать свойство vertical-align . Это логично и мой первый выбор был бы таким же. Чтобы центрировать элемент в таблице, можно использовать атрибут valign .

      Однако атрибут valign работает только применительно к ячейке (например, ). Свойство CSS vertical-align можно применить к ячейке и к некоторым встроенным элементам.

      • Текст центрируется относительно line-height (межстрочный интервал).
      • Применительно к таблице, если не вдаваться в детали, центрирование происходит относительно высоты ряда.

      К сожалению, свойство vertical-align нельзя применять к блочным элементам, например, таким как параграф (p) внутри тега div .

      Однако существуют другие методы центрирования элементов по вертикали, и вы по-прежнему можете использовать свойство vertical-align там, где это необходимо. Какой метод использовать зависит от того, что вы собираетесь центрировать.

      Межстрочный интервал или Line-height

      Данный метод стоит использовать только тогда, когда вам нужно центрировать строчку текста. Для этого необходимо у элемента, который содержит текст, установить line-height (межстрочный интервал) больше чем размер шрифта.

      По умолчанию образуется равное пространство над и под текстом, таким образом, текст центрируется по вертикали.

      В данном случае высоту родительского элемента указывать необязательно.

      Данный метод работает во всех браузерах, однако не забывайте, что его стоит использовать для строчки текста. Если ваш текст занимает более одной строки, примените другой метод. Значение свойства line-height может быть любым, но не меньше чем высота шрифта. На практике данный метод отлично подходит для центровки горизонтального меню.

      CSS Метод с использованием свойств таблиц

      Как я уже писал, содержимое ячейки можно центрировать с помощью свойства CSS vertical-align . Родительский элемент необходимо представить как таблицу, дочерний элемент обозначим как ячейку и применим к нему свойство vertical-align со значением middle . Таким образом, любой контент в элементе-потомке будет центрирован по вертикали. Css код приведен ниже.

      К сожалению, данный метод не работает в старых версиях браузера IE. Если вам требуется поддержка браузера IE6 и ниже, добавьте объявление display: inline-block дочернему элементу.

      Абсолютное позиционирование и отрицательное поле

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

      Ниже приведен код, где дочерний элемент центрирован с помощью данного метода.

      Для начала необходимо позиционировать родительский и дочерний элемент. Затем мы назначаем смещение дочернего элемента на 50% относительно верха (top) и левой стороны (left) элемента родителя, тем самым мы центрируем дочерний элемент относительно родительского. Однако наши манипуляции поставят верхний правый угол дочернего элемента по центру элемента родителя, что нас, конечно, не устраивает.

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

      Итак, нам следует задать дочернему элементу отрицательное верхнее и левое поле равное половине, соответственно, ширине и высоте дочернего элемента.

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

      Абсолютное позиционирование дочернего элемента

      Как и в предыдущем методе, родительский и дочерний элемент позиционируются, соответственно, относительно и абсолютно.

      В коде CSS я центрирую дочерний элемент и по вертикали и по горизонтали, однако вы можете использовать только центрирование по вертикали.

      Идея данного метода в том, что можно позиционировать дочерний элемент, используя значения свойств top , left , right , bottom равные 0. Так как наш элемент-потомок меньше родительского элемента, он не сможет «прилипнуть» к элементу родителю.

      Значения полей для всех четырех сторон дочернего элемента равны нулю, благодаря этому элемент центрируется по вертикали относительно родителя. К сожаления данный метод имеет те же недостатки, что и предыдущий метод: необходимо фиксировать высоту и ширину потомка, отсутствие поддержки старых браузеров IE.

      Нижний и верхний отступы равны

      В этом методе мы явно назначаем родительскому элементу равные отступы (нижний и верхний), благодаря этому дочерний элемент визуально центрируется по вертикали.

      Я использую относительные размеры. Если размеры блоков зафиксированы, то понадобится произвести некоторые математические расчеты.

      Например, если элемент-родитель имеет высоту 400px, а дочерний 100px, то следует установить верхний и нижний отступ по 150px.

      150 + 150 + 100 = 400

      Плавающий div

      В этом методе задействован пустой плавающий (float) блок, который контролирует вертикальное положение дочернего элемента. Плавающий блок div необходимо поставить перед дочерним элементом, смотрите код HTML ниже.

      Сначала мы сдвигаем плавающий блок влево (или вправо) и назначаем ему высоту 50% от родительского элемента. Таким образом, плавающий блок заполнит верхнюю половину родительского элемента.

      Так блок плавающий, то он удален из общего потока документа, следовательно, дочернему блоку следует назначить свойство clear со значением both . Я поставил значение both , однако вы можете использовать то значение, которое совпадает с направлением позиционирования плавающего элемента.

      Сейчас верхний край дочернего элемента лежит непосредственно под нижним краем плавающего элемента. Нам требуется приподнять дочерний элемент на половину высоты плавающего элемента. Для этого достаточно установить для плавающего блока отрицательное нижнее поле равное 50%.

      Работает во всех браузерах. Недостаток метода в том, что необходим пустой блок и требуется знать высоту дочернего элемента.

      Выравнивание img по вертикали css. Центрирование блока средствами CSS

      Постановка задачи: необходимо задать вертикальное выравнивание для inline или inline-block элементов внутри блочного элемента.

      Подходы к решению задачи. Существуют различные способы, рассмотрим основные из них:

      1. Представить блочный элемент как ячейку таблицы (display: table-cell ).
      2. IE6-7: метод expression.
      3. Приравнивание межстрочного интервала (свойство line-height ) и высоты блока (для однострочных элементов).
      4. Позиционирование при помощи внешнего блока (position:absolute ).

      Ну а подведя итоги, рассмотрим еще один метод:

      5. Выравнивание с помощью свойства vertical-align.

      display: table-cell

      Для вертикального выравнивания применяется свойство display: table-cell родительскому блоку, которое заставляет элемент эмулировать ячейку таблицы. Ему же задается высота и vertical-align: middle :

      Вертикальное выравнивание. Способ display: table-cell

      blackhack.ru ОК. Настройки, новости, игры.

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

      Центровка элементов по горизонтали не так уж и сложна, по вертикали уже вызывает вопросы, ну а комбинирование вообще может поставить в тупик. В эру адаптивного дизайна, нам редко точно ясны размеры тех или иных элементов. Я насчитал 6 различных способов центровки элементов с помощью CSS. Начнём с простых примеров, закончим более сложными. Работать будет с одним и тем же HTML кодом:

      Горизонтальная центровка с помощью text-align

      Порой, самое простое решения является самым лучшим:

      Тут нет вертикальной центровки: для этого вам нужно будет к div-у добавить свойство margin-top и margin-bottom.

      Центровка с помощью margin: auto

      Ещё одно решения для горизонтальной центровки:

      Заметьте что для этого способа нужно выставить свойство display: block.

      Центровка с помощью table-cell

      Используя display: table-cell, мы можем обеспечить центровку элемента как по вертикали, так и по горизонтали. Но тут нам понадобится вложить изображение ещё в один элемент div.

      Чтобы всё работало корректно, div-у нужно выставить width: 100%. Для центровки элемента по вертикали, воспользуемся стандартными приёмами, выставив высоту. Работает везде, включая IE8+.

      Абсолютная центровка

      Очень интересное решение. Заключается в том, что необходимо задать высоту внешнему контейнеру:

      Центрируем с помощью translate

      Новое решение, где используются CSS трансформации. Обеспечивает как горизонтальную центровку, так и вертикальную:

      Есть несколько минусов:

      • Свойство CSS transform требует использование браузерных префиксов
      • Не работает в старых версиях IE (8 и ниже)
      • Внешнему контейнеру нужно задавать высоту.
      • Если внутри контейнера есть текст, то он может быть немного размыт.

      Центровка с помощью вида отображения flex

      Наверное самый простой вариант.

      Работает не во всех версиях IE (хотя можно подстраховать себя, используя вдобавок display: table-cell). Полный CSS:

      Центровка с помощью calc

      В некоторых случаях, данный способ более универсален чем использование flexbox:

      Всё очень просто, мы можем высчитать нужные нам размеры в зависимости от всего макета страницы. Вычисления очень просты, 50% это центральная точка контейнера, но наша задача разместить по этим координатам левый верхний угол изображения. Далее отнять по половине высоты и ширины изображения. Формула следующая:

      Top: calc(50% — (40% / 2)); left: calc(50% — (40% / 2));

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

      Данный метод поддерживается Firefox-ом, начиная с 4 версии, вам нужно будет прописать браузерные префиксы. В IE 8 не работает. Полный код:

      Надеюсь, данных методов хватит, чтобы вы нашли для себя лучшее решение.

      Постановка задачи: необходимо задать вертикальное выравнивание для inline или inline-block элементов внутри блочного элемента.

      Подходы к решению задачи. Существуют различные способы, рассмотрим основные из них:

      1. Представить блочный элемент как ячейку таблицы (display: table-cell ).
      2. IE6-7: метод expression.
      3. Приравнивание межстрочного интервала (свойство line-height ) и высоты блока (для однострочных элементов).
      4. Позиционирование при помощи внешнего блока (position:absolute ).

      Ну а подведя итоги, рассмотрим еще один метод:

      5. Выравнивание с помощью свойства vertical-align.

      display: table-cell

      Для вертикального выравнивания применяется свойство display: table-cell родительскому блоку, которое заставляет элемент эмулировать ячейку таблицы. Ему же задается высота и vertical-align: middle :

      Вертикальное выравнивание. Способ display: table-cell

    Цукерберг рекомендует:  Портал в мир IT. раздает счастливые билеты!
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих