Выравнивание текста определяет его внешний вид и ориентацию краев абзаца и может выполняться по левому краю, правому краю, по центру или по ширине. В табл. 1 показаны варианты выравнивания блока текста.
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. |
Наиболее распространенный вариант — выравнивание по левому краю, когда слева текст сдвигается до края, а правый остается неровным. Выравнивание по правому краю и по центру в основном используется в заголовках и подзаголовках. Следует иметь в виду, что при использовании выравнивания по ширине в тексте между словами могут появиться большие интервалы, что не очень красиво.
Для установки выравнивания текста обычно используется тег абзаца
С атрибутом align , который определяет способ выравнивания. Также блок текста допустимо выравнивать с помощью тега с аналогичным атрибутом align , как показано в табл. 2.
| Добавляет новый абзац текста, по умолчанию выровненный по левому краю. Перед абзацем и после него автоматически добавляются небольшие вертикальные отступы. | |
Текст |
Выравнивание по центру. |
Текст |
Выравнивание по левому краю. |
Текст |
|
Текст |
Выравнивание по ширине. |
| Текст | Отключает автоматический перенос строк, даже если текст шире окна браузера. |
| Текст | Разрешает браузеру делать перенос строки в указанном месте, даже если используется тег . |
| Текст | Выравнивание по центру. |
| Текст | Выравнивание по левому краю. |
| Текст | Выравнивание по правому краю. |
| Текст | Выравнивание по ширине. |
Выравнивание элементов по левому краю задано по умолчанию, поэтому указывать его лишний раз необходимости нет. Так что align="left" можно опустить.
Отличие между абзацем (тег
) и тегом в том, что в начале и конце параграфа появляется вертикальный отступ, чего нет в случае использования тега .
Атрибут align достаточно универсален и может применяться не только к основному тексту, но и к заголовкам вроде . В примере 1 показано, как в подобном случае устанавливать выравнивание.
Пример 1. Выравнивание текста
Выравнивание текста Как поймать льва?
Метод перебора
Делим пустыню на ряд элементарных участков, размер которых совпадает с габаритными размерами льва, но при этом меньше размера клетки. Далее простым перебором определяем участок, в котором находится лев, что автоматически приводит к его поимке.
Метод дихотомии
Делим пустыню на две половины. В одной части - лев, в другой его нет. Берем ту половину, в которой находится лев, и снова делим ее пополам. Так повторяем до тех пор, пока лев не окажется пойман.
Результат примера показан на рис. 1.
Рис. 1. Выравнивание текста по правому и левому краю
В данном примере выравнивание заголовка происходит по центру окна браузера, выделенного абзаца по правому краю, а основного текста — по левому краю.
Существует несколько принципиально отличающихся способов для того чтобы отцентрировать объект по вертикали с помощью CSS, однако сложность может быть в выборе правильного. Мы рассмотрим некоторые из них, а также сделаем небольшой сайт, используя полученные знания.
Вертикальное выравнивание по центру с помощью CSS достигается не так просто. Существует множество способов и не все работают во всех броузерах. Давайте рассмотрим 5 различных методов, а также "за" и "против" каждого из них. Пример.
Этот метод предполагает, что мы устанавливаем некоторому элементу способ отображения как таблица, после этого мы можем использовать в нём свойство vertical-align (которое работает по разному в различных элементах).
Некоторая полезная информация, которая должна располагаться по центру. #wrapper{ display: table; } #cell{ display: table-cell; vertical-align: middle; }
Плюсы- Контент может динамически изменять высоту (высота не определена в CSS).
- Контент не обрезается в случае, если для него недостаточно места.
- Не работает в IE 7 и меньше
- Много вложенных тэгов
Этот метод использует абсолютное позиционирование div -а, которому top устанавливается в 50%, а верхний отступ (margin-top) минус половине высоты контента. Это подразумевает, что объект должен иметь фиксированную высоту, которая определена в стилях CSS.
Поскольку высота фиксированная, вы можете установить overflow:auto; для div -а содержащего контент, таким образом, в случае если контент не будет влазить, то появятся скролл-бары.
Content Here #content { position: absolute; top: 50%; height: 240px; margin-top: -120px; /* минус от половины высоты */ }
Плюсы- Работает во всех броузерах.
- Нет лишней вложенности.
- Когда не достаточно места, контент пропадает (например, div находится внутри body , а пользователь уменьшил окна, в этом случае скролл-бары не появятся.
В этом методе, мы обернём div с контентом другим div -ом. Установим ему высоту в 50% (height: 50%;), а нижний отступ половине высоты (margin-bottom:-contentheight;). Контент будет очищать float и выводиться по центру.
здесь контент #floater{ float: left; height: 50%; margin-bottom: -120px; } #content{ clear: both; height: 240px; position: relative; }
Плюсы- Работает во всех броузерах.
- Когда недостаточно места (например, когда уменьшено окно) контент не обрезается, появятся скроллбары.
- Думаю только один: что используется лишний пустой элемент.
Этот метод использует свойство position:absolute; для div -а с фиксированными размерами (шириной и высотой). Затем устанавливаем ему координаты top:0; bottom:0; , но поскольку у него фиксированная высота, то он не может растянуться и выравнивается по центру. Это очень похоже на общеизвестный метод горизонтального выравнивания по центру блочного элемента фиксированной ширины (margin: 0 auto;).
Важная информация. #content{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 240px; width: 70%; }
Плюсы- Очень просто.
- Не работает в Internet Explorer
- Контент будет обрезаться без скролл-баров, если не хватает места в контейнере.
С помощью этого метода можно выровнять по центру одну строку текста. Просто устанавливаем высоту текста (line-height) равной высоте элемента (height). После этого строка будет выведена по центру.
Какая-то строка текста #content{ height: 100px; line-height: 100px; }
Плюсы- Работает во всех броузерах.
- Не обрезает текст, если он не влез.
- Работает только с текстом (не работает с блочными элементами).
- Если текста больше чем одна строка, то выглядит очень плохо.
Этот способ очень полезен для небольших элементов, например чтобы вырвнять по центру текст в кнопке или в текстовом поле.
Теперь вы знаете как добиться вертикального выравнивания по центру, давайте сделаем простой web-сайт, который, в конце-концов будет выглядеть так:
Всегда хорошо начинать с семантической разметки. Наша страница будет структурирована следующим образом:
- #floater (чтобы выровнять контент по центру)
- #centred (центральный элемент)
- #side
- #logo
- #nav (список
- #content
- #bottom (для копирайтов и всего такого)
Напишем следующую html-разметку:
A Centred Company A Company
Page TitleHolisticly 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 2Efficiently 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.
Copyright notice goes here
Шаг 2Сейчас мы напишем простейший CSS, для размещения элементов на странице. Вы должны сохранить этот код в файле style.css . Именно на него прописана ссылка в html-файле.
Html, body { margin: 0; padding: 0; height: 100%; } body { background: url("page_bg.jpg") 50% 50% no-repeat #FC3; font-family: Georgia, Times, serifs; } #floater { position: relative; float: left; height: 50%; margin-bottom: -200px; width: 1px; } #centered { position: relative; clear: left; height: 400px; width: 80%; max-width: 800px; min-width: 400px; margin: 0 auto; background: #fff; border: 4px solid #666; } #bottom { position: absolute; bottom: 0; right: 0; } #nav { position: absolute; left: 0; top: 0; bottom: 0; right: 70%; padding: 20px; margin: 10px; } #content { position: absolute; left: 30%; right: 0; top: 0; bottom: 0; overflow: auto; height: 340px; padding: 20px; margin: 10px; }
Перед тем как сделать наш контент выровненным по центру, необходимо для body и html установить высоту 100%. Так как высота считается без внутренних и внешних отступов (padding и margin), то мы устанавливаем их (отступы) в 0, чтобы не было скроллбаров.
Нижний отступ для элемента "floater"-а равен минус половине высоты контента (400px), а именно -200px ;
Сейчас ваша страничка должна выглядеть приблизительно так:
Ширина элемента #centered 80%. Это делает наш сайт уже на маленьких экранах и шире на больших. большинство сайтов выглядит неприлично на новых широких мониторах в верхнем левом углу. Свойства min-width и max-width также ограничивают нашу страничку, чтобы она не выглядела слишком широкой или слишком узкой. Internet Explorer не поддерживает эти свойства. Для него надо установить фиксированную ширину.
Поскольку элементу #centered установлено position:relative , мы можем использовать абсолютное позиционирование элементов внутри него. Затем установим overflow:auto; для элемента #content , чтобы появлялись скроллбары, в случае если не будет помещаться контент.
Шаг 3И последнее что мы сделаем, это добавим кое-какие стили, чтобы страничка выглядела немного привлекательнее. Давайте начнём с меню.
#nav ul { list-style: none; padding: 0; margin: 20px 0 0 0; text-indent: 0; } #nav li { padding: 0; margin: 3px; } #nav li a { display: block; background-color: #e8e8e8; padding: 7px; margin: 0; text-decoration: none; color: #000; border-bottom: 1px solid #bbb; text-align: right; } #nav li a::after { content: "»"; color: #aaa; font-weight: bold; display: inline; float: right; margin: 0 2px 0 5px; } #nav li a:hover, #nav li a:focus { background: #f8f8f8; border-bottom-color: #777; } #nav li a:hover::after { margin: 0 0 0 7px; color: #f93; } #nav li a:active { padding: 8px 7px 6px 7px; }
Первое что мы сделали, чтобы меню выглядело лучше, удалили маркеры, установив атрибут list-style:none , а также установили внутренние и внешние отступы, так как по умолчанию в разных броузерах они сильно различаются.
Обратите внимание, что затем мы указали чтобы ссылки отбражадись как блочные элементы. Теперь, при выводе, они растягиваются по всей ширине элемента в котором они расположены.
Другая интересная вещь, которую мы использовали для меню - это псевдо-классы:before и:after . Они позволяют вам добавить что-нибудь перед и после элемента. Это хороший способ добавлять иконки или символы, такие как стрелочка в конце каждой ссылки. Такой трюк не работает в Internet Explorer 7 и ниже.
Шаг 4
Ну и самое последнее, мы добавим в наш дизайн кое-какие втили для ещё большей красоты.
#centered { -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } h1, h2, h3, h4, h5, h6 { font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #666; } h1 { color: #f93; border-bottom: 1px solid #ddd; letter-spacing: -0.05em; font-weight: bold; margin-top: 0; padding-top: 0; } #bottom { padding: 10px; font-size: 0.7em; color: #f03; } #logo { font-size: 2em; text-align: center; color: #999; } #logo strong { font-weight: normal; } #logo span { display: block; font-size: 4em; line-height: 0.7em; color: #666; } p, h2, h3 { line-height: 1.6em; } a { color: #f03; }
В этих стилях мы устанавливаем закруглённые углы для элемента #centered . В CSS3, за это будет отвечать свойство border-radius . Это пока что не реализовано некоторыми броузерами, разве только использовать приставки -moz и -webkit для Mozilla Firefox и Safari/Webkit.
СовместимостьКак вы уже наверное предположили, основной источник проблем совместимости - Internet Explorer:
- Элементу #floater обязательно надо установить ширину
- В IE 6 лишние отступы вокруг меню
237154 просмотра
Очень часто стоит задача выровнять блок по центру страницы / экрана, да ещё и так, чтобы без ява-скрипта, без задания жёстких размеров или отрицательных отступов, ещё чтобы и скроллбары работали у родителя, если блок превышает его размеры. В сети ходят достаточно много однообразных примеров как выровнять блок по центру экрана. Как правило большинство из них основаны на одних принципах.
Вариант 1. Отрицательный отступ. Позиционируем блок атрибутами top и left на 50%, и заранее зная высоту и ширину блока, задаём отрицательный margin, который равен половине размера блока . Огромным минусом данного варианта является то, что нужно подсчитывать отрицательные отступы. Так же блок не совсем корректно ведёт себя в окружении скроллбаров - он попросту обрезается так как имеет отрицательные отступы.
Ниже представлены основные способы решения задачи, их плюсы и минусы. Чтобы понимать суть примеров, рекомендую уменьшить высоту / ширину окошка Result в примерах по указанным ссылкам.Parent { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; } .block { width: 250px; height: 250px; position: absolute; top: 50%; left: 50%; margin: -125px 0 0 -125px; img { max-width: 100%; height: auto; display: block; margin: 0 auto; border: none; } }
Вариант 2. Автоматический отступ. Менее распространённый, но схожий с первым. Для блока задаём ширину и высоту, позиционируем атрибутами top right bottom left на 0, и задаём margin auto. Плюсом данного варианта являются рабочие скроллбары у родителя , если у последнего задана 100% ширина и высота. Минусом данного способ является жёсткое задание размеров.Parent { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; } .block { width: 250px; height: 250px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; img { max-width: 100%; height: auto; display: block; margin: 0 auto; border: none; } }
Вариант 3. Таблица. Задаём родителю табличные стили, ячейке родителя устанавливаем выравнивание текста по центру. А блоку задаём модель строчного блока. Минусами мы получаем не рабочие скроллбары, и в целом не эстетичность «эмуляции» таблицы.Parent { width: 100%; height: 100%; display: table; position: absolute; top: 0; left: 0; > .inner { display: table-cell; text-align: center; vertical-align: middle; } } .block { display: inline-block; img { display: block; border: none; } }
Чтобы добавить скролл в данный пример, придётся добавить в конструкцию ещё один элемент.
Вариант 4. Псевдо-элемент. Данный вариант лишён всех проблем, перечисленных у предыдущих способов, а так же решает первоначально поставленные задачи. Суть состоит в том, чтобы у родителя задать стили псевдо-элементу before, а именно 100% высоту, выравнивание по центру и модель строчного блока. Так же само и у блока ставится модель строчного блока, выравнивание по центру. Чтобы блок не «падал» под псевдо-элемент , когда размеры первого больше чем родителя , указываем родителю white-space: nowrap и font-size: 0, после чего у блока отменяем эти стили следующими - white-space: normal. В данном примере font-size: 0 нужен для того, чтобы убрать образовавшийся пробел между родителем и блоком в связи с форматированием кода. Пробел можно убрать и иными способами, но лучшим считается просто его не допускать.
Пример: jsfiddle.net/serdidg/fk5nqh52/3 .Parent { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; white-space: nowrap; text-align: center; font-size: 0; &:before { height: 100%; display: inline-block; vertical-align: middle; content: ""; } } .block { display: inline-block; white-space: normal; vertical-align: middle; text-align: left; img { display: block; border: none; } }
Либо, если вам нужно, чтобы родитель занимал только высоту и ширину окна, а не всей страницы:
Parent { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: auto; white-space: nowrap; text-align: center; font-size: 0; &:before { height: 100%; display: inline-block; vertical-align: middle; content: ""; } } .block { display: inline-block; white-space: normal; vertical-align: middle; text-align: left; img { display: block; border: none; } }
Вариант 5. Flexbox. Одним из самых простых и элегантных способов является использования flexbox. Он не требует лишних телодвижений, достаточно понятно описывает суть происходящего, обладает высокой гибкостью. Единственное, что стоит помнить при выборе данного способа - поддержка IE от 10-й версии включительно. caniuse.com/#feat=flexboxParent { width: 100%; height: 100%; position: fixed; top: 0; left: 0; display: flex; align-items: center; align-content: center; justify-content: center; overflow: auto; } .block { background: #60a839; img { display: block; border: none; } }
Вариант 6. Transform. Подходит в случае если мы ограничены структурой, и нет возможности манипулировать родительским элементом, а блок выровнять как-то нужно. На помощь придёт css функция translate() . При значение 50% абсолютное позиционирование расположит верхний левый угол блока точно по центру, затем отрицательное значение translate сдвинет блок относительно своих собственных размеров. Учтите, что могут всплыть негативные эффекты в виде размытых граней или начертания шрифта. Также подобный способ может привести к проблемах с вычислением положения блока с помощью java-script"а. Иногда для компенсации потери 50% ширины из-за использования css свойства left может помочь заданное у блока правило: margin-right: -50%; .Parent { width: 100%; height: 100%; position: fixed; top: 0; left: 0; overflow: auto; } .block { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); img { display: block; } }
Вариант 7. Кнопка. Пользователь azproduction вариант, где блок обрамляется в тег button. Кнопка имеет свойство центрировать всё, что находится у неё внутри, а именно элементы строчной и блочно-строчной (inline-block) модели. На практике использовать не рекомендую.Parent { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; background: none; border: none; outline: none; } .block { display: inline-block; img { display: block;; border: none; } }
Бонус Используя идею 4-го варианта, можно задавать внешние отступы для блока , и при этом последний будет адекватно отображаться в окружении скроллбаров.
Пример: jsfiddle.net/serdidg/nfqg9rza/2 .Так же можно выравнивать картинку по центру, и в случае если картинка больше родителя , масштабировать её по размеру родителя .
Пример: jsfiddle.net/serdidg/nfqg9rza/3 .
Пример c большой картинкой:Сегодня, уважаемый читатель, мы с вами разберемся с проблемой вертикального выравнивания в блоке div .
Скорее всего вы уже знаете о существовании замечательного свойства CSS vertical-align. И сам Бог велел нам пользоваться для вертикального выравнивания именно этим свойством (не зря же оно носит такое, говорящее само за себя, название).
Постановка задачи: Необходимо выровнять содержимое блока переменной высоты по центру относительно вертикали.
Теперь приступим к решению поставленной задачи.
И так, у нас есть блок, высота его может меняться:
Содержимое блока
Первое, что приходит в голову – это сделать следующий финт:
Содержимое блока
Есть все основания предполагать, что фраза Содержимое блока выровняется по центру высоты div-контейнера.
Но не тут-то было! Никакого ожидаемого выравнивания по центру таким образом мы не добьемся. А почему? Казалось бы все указано правильно. Оказывается вот в чем загвоздка: свойство vertical-align можно применять только для выравнивания содержимого ячеек таблиц или для выравнивания строчных элементов друг относительно друга.
По поводу выравнивания внутри ячейки таблицы, я думаю, все понятно. А вот другой случай со строчными элементами я поясню.
Вертикальное выравнивание строчных элементовПредположим есть у вас строка текст, которая разбита строчными тегами на части:
Вас приветствует кусок текста!
Под строчным тегом понимается контейнер, появление которого не приводит к переносу содержимого на новую строку.
Действие же блочного тега приводит к переносу содержимого контейнера на новую строку.
– это блочный тег. Если мы заключим куски текста в блоки , то каждый из них окажется на новой строке. Используя тег , который, в отличие от , является строчным, переноса контейнеров на новую строку не будет, все контейнеры останутся в одной строке.
Контейнер удобно использовать при задании части текста особого форматирования (выделение цветом, другим шрифтом и т.д.)
Для контейнеров применим следующие свойства CSS:
#perviy{ vertical-align:sub; } #vtoroy{ vertical-align:3px; } #tretiy{ vertical-align:-3px; }
В результате строка текста будет иметь вот такой вид:
Это и есть ничто иное, как выравнивание строчных элементов по вертикали, и свойство CSS vertical-align с этой задачей прекрасно справляется.
Мы немного отвлеклись, теперь возвращаемся к нашей основной задаче.
Выравнивание по вертикали в div-контейнереНе смотря ни на что, для выравнивания внутри div-контейнера мы будем использовать свойство vertical-align . Как я уже говорил, данное свойство можно использовать в случае выравнивания строчных элементов (этот случай мы подробно рассмотрели выше и для выравнивания в div-контейнере он нам не подходит); остается лишь использовать тот факт, что vertical-align работает для ячеек таблицы.
Как же мы сможем это использовать? У нас же нет таблицы, мы работаем с div-контейнером.
Ха, оказывается очень просто.
CSS-свойство display позволяет превратить наш блок div в ячейку таблицы, сделать это можно легко и непринужденно:
Пусть у нас есть div класса textalign:
Содержимое блока
Для данного блока указываем следующее CSS-свойство:
Textalign{ display: table-cell; }
Эта CSS-инструкция чудесным образом превратит наш блок div в ячейку таблицы, визуально никак его не изменив. А для ячейки таблицы мы сможем применять свойство vertical-align в полной мере и будет работать желаемая центровка по вертикали.
Однако, все так просто закончится не может. У нас же есть замечательный браузер IE. Он не умеет работать со свойством display: table-cell (предлагаю вам ознакомится с табличкой, иллюстрирующей работоспособность данного CSS-свойства в разных браузерах на сайте htmlbook.ru). Поэтому нам придется идти на различные ухищрения.
Существует множество способов добиться выравнивания в div-контейнере для всех браузеров:
- Способ с применением дополнительного вспомогательного div-котнейнера
- Способ с использованием expression-а . Связан он с хитрым вычислением высот блоков. Без знания JavaScript тут не обойтись.
- Использование свойства line-height . Данный способ подходит только для вертикального выравнивания в блоке известной высоты, а значит в общем случае не применим.
- Использование абсолютного и относительного смещения содержимого в случае браузера IE. Мне этот способ кажется наиболее понятным и простым. Кроме того, он реализуем для div-контейнера переменной высоты. На нем мы остановимся подробнее.
Как вы понимаете, нам остается решить проблему вертикального выравнивания в IE, связанную с его непониманием свойства display: table-cell (ни IE6, ни IE7, ни IE8 с этим свойством не знакомы). Поэтому воспользовавшись условным комментарием специально для браузеров семейства IE мы укажем другие свойства CSS.
Условный комментарийКонструкция вида:
... Инструкции, действующие только в случае выполнения условия в квадратных скобках...
называется условным комментарием (будьте внимательны, вид условного комментария должен полностью соответствовать приведенному примеру, с точностью до пробела).
Инструкции, содержащиеся в подобном условном комментарии будут выполнены только в случае, если браузер, интерпретирующий данный код, принадлежит к семейству IE.
Таким образом, используя условный комментарий, мы сможем спрятать кусок кода от всех браузеров кроме IE.
Решение задачиИз-за всей этой петрушки нам нужно будет снабдить наш HTML-код двумя дополнительными контейнерами. Вот каким образом будет выглядеть наш блок с текстом:
Это какой-то проверочный текст.
Он состоит из двух строк.Для div-контейнера класса textalign задаются CSS-свойства, которые выравнивают его содержимое по вертикали для всех нормальных браузеров (кроме IE, разумеется):
Display: table-cell; vertical-align: middle;
И еще два свойства, которые задают ширину и высоту для блока:
Width:500px; height: 500px;
Этого вполне достаточно для выравнивания содержимого контейнера по центру относительно вертикали, во всех браузерах кроме IE .
Теперь начинаем дописывать свойства, связанные с выравниванием для браузеров семейства IE (именно для них мы использовали дополнительные блоки div и span ):
Обращаемся к тегу div внутри блока класса textalign . Для этого нужно указать сначала название класса, а потом, через пробел, тег, к которому мы обращаемся.
Textalign div{ position: absolute; top: 50%; }
Такая конструкция означает: для всех тегов div внутри блока с классом textalign применить перечисленные свойства.
Соответственно, стили заданные для блока textalign видоизменяются:
Textalign{ display: table-cell; vertical-align: middle; width:500px; height: 500px; position: relative; }
Теперь левая верхняя точка текстового блока смещена вниз на 50%.
Для пояснения происходящего я нарисовал иллюстрацию:
Как видно из картинки, определенного прогресса мы добились. Но это еще не все! Верхняя левая точка желтого блока действительно сместилась на 50% вниз, относительно родительского (фиолетового) блока. Но нам-то нужно, чтобы на пятидесяти процентах высоты фиолетового блока находился центр желтого блока , а не его верхняя левая точка.
Теперь в ход пойдет тег span и его относительное позиционирование:
Textalign span{ position: relative; top: -50%; }
Тем самым, мы сместили желтый блок вверх на 50% его высоты, относительно начального положения. Как вы понимаете, высота желтого блока равна высоте центрируемого контента. И последняя операция со span-контейнером расположила наш контент посередине фиолетового блока. Ура!
Немного подшаманимПерво-на-перво нам нужно спрятать петрушку от всех нормальных браузеров и открыть ее для IE. Сделать это можно, конечно же, при помощи условного комментария, не зря мы с ним знакомились:
.textalign div{ position: absolute; top: 50%; } .textalign span{ position: relative; top: -50%; }
Есть небольшая проблемка. Если центруемый контент слишком высокий, то это приводит к неприятным последствиям: появляется лишняя высота вертикальной прокрутки.
Решение проблемы: нужно добавить свойство overflow: hidden блоку textalign.
Детально познакомиться со свойством overflow можно в .
Окончательный вид CSS-инструкций для блока textalign имеет вид:
Textalign{ display: table-cell; vertical-align: middle; width:500px; height: 500px; position: relative; overflow: hidden; border: 1px solid black; }
Прошу пардону, забыл упомянуть один важный момент. Если вы будите пытаться задавать высоту блока класса textalign в процентном соотношении , то у вас ничего не выйдет .
Центровка в блоке переменной высотыОчень часто встречается необходимость задать высоту блока класса textalign не в пикселах, а в процентах от высоты родительского блока, и выровнять содержимое div-контейнера по середине.
Загвоздка в том, что для ячейки таблицы невозможно этого сделать (а ведь блок класса textalign превращается именно в ячейку таблицы, благодаря свойству display:table-cell ).
В этом случае необходимо использовать внешний блок, для которого указано CSS-свойство display:table и уже для него задавать процентное значение высоты. Тогда вложенный в него блок, с CSS-директивой display:table-cell , благополучно унаследует высоту родительского блока.
Для того, чтобы в нашем примере реализовать блок переменной высоты, мы немного подредактируем CSS:
Классу textalign мы изменим значение свойства display с table-cell на table и убирем директиву выравнивания vertical-align: middle . Теперь мы смело можем изменить значение высоты с 500 пикселов на, например, 100%.
Таким образом, CSS-свойства для блока класса textalign будут иметь следующий вид:
Textalign{ display: table; width:500px; height: 100%; position: relative; overflow: hidden; border: 1px solid black; }
Остается реализовать центрирование содержимого. Для этого div-контейнеру, вложенному в блок класса textalign (это тот самый желтый блок на рисунке), необходимо задать CSS-свойство display:table-cell , тогда он унаследует высоту в 100% от родительского блока textalign (фиолетовый блок). И нам ничто не помешает выровнять содержимое вложенного div-контейнера по центру свойством vertical-align: middle .
Получаем еще один дополнительный список CSS-свойств для блока div, вложенного в контейнер textalign .
Textalign div{ display: table-cell; vertical-align: middle; }
Вот и вся хитрость. При желании, вы можете переменной высоты с отцентрованным содержимым.
Дополнительную информацию по вертикальному выравниванию блока переменной высоты можно получить .
Очень часто в верстке требуется центрировать какой-нибудь элемент по горизонтали и/или вертикали. Поэтому решил сделать статью с различными способами центрирования, чтобы все находилось под рукой в одном месте.
Горизонтальное выравнивание margin: autoВыравнивание по горизонтали при помощи margin используется при известной ширине центрируемого элемента. Работает для блочных элементов:
Elem { margin-left: auto; margin-right: auto; width: 50%; }
Указание значения auto правого и левого отступа делает их равными, что и центрирует элемент по горизонтали в пределах родительского блока.
text-align: centerДанный способ подходит для выравнивания по центру текста в пределах блока. text-align: center:
Выравнивание с помощью text-align .wrapper { text-align: center; }
Я выровнен по центру
position и отрицательный margin влевоПодойдет для центрируемых блоков известной ширины. Задаем родительскому блоку position: relative для позиционирования относительно него, центрируемому элементу position: absolute , left: 50% и отрицательный margin-left , значение которого равно половине ширины элемента:
Выравнивание с помощью position .wrapper { position: relative; } .wrapper p { left: 50%; margin: 0 0 0 -100px; position: absolute; width: 200px; }
Я выровнен по центру
display: inline-block + text-align: centerСпособ подходит для выравнивания блоков неизвестной ширины, но требует обертку-родителя. Например таким образом можно центрировать горизонтальное меню:
Выравнивание с помощью display: inline-block + text-align: center; .navigation { text-align: center; } .navigation li { display: inline-block; }
Вертикальное выравнивание line-heightДля выравнивания одной строки текста можно использовать одинаковые значения высоты и межстрочного интервала для блока-родителя. Подходит для кнопок, пунктов меню и проч.
line-height .wrapper { height: 100px; line-height: 100px; }
Я выровнен по вертикали
position и отрицательный margin вверхЭлемент можно выравнить по вертикали, задав ему фиксированную высоту и применив position: absolute и отрицательный margin вверх, равный половине высоты выравниваемого элемента. Родительскому блоку должен быть присвоен position: relative:
Wrapper { position: relative; } elem { height: 200px; margin: -100px 0 0; position: absolute; top: 50%; }
Таким образом, используя позиционирование и отрицательные поля, можно центрировать элемент на странице.
display: table-cellДля вертикального выравнивания применяется свойство display: table-cell элементу, которое заставляет эмулировать ячейку таблицы. Ему же задаем высоту и vertical-align: middle . Все это обернем в контейнер со свойством dislpay: table; :
Вертикальное выравнивание display: table-cell .wrapper { display: table; width: 100%; } .cell { display: table-cell; height: 100px; vertical-align: middle; }
Я выровнен по вертикали
Динамическое выравнивание элемента на страницеМы рассмотрели способы выравнивания элементов на странице при помощи CSS. Теперь взглянем на реализацию варианта с jQuery.
Подключим jQuery на страницу:
Я предлагаю написать простую функцию центрирования элемента на странице, назовем ее alignCenter() . В качестве аргумента функции выступает сам элемент:
Function alignCenter(elem) { // код здесь }
В теле функции динамически вычислим и повесим координаты центра страницы свойствам CSS left и top:
Function alignCenter(elem) { elem.css({ left: ($(window).width() - elem.width()) / 2 + "px", top: ($(window).height() - elem.height()) / 2 + "px" // не забывайте добавить элементу position: absolute для срабатывания координат }) }
В первой строчке функции мы получаем ширину документа и отнимаем от нее ширину элемента, деленную пополам — это и будет центр страницы по горизонтали. Вторая строка делает то же самое, только с высотой, для выравнивания по вертикали.
Фукнция готова, остается навесить ее на события готовности DOM и ресайза окна:
$(function() { // вызов функции центрирования при готовности DOM alignCenter($(elem)); // вызов функции при ресайзе окна $(window).resize(function() { alignCenter($(elem)); }) // функция центрирования элемента function alignCenter(elem) { elem.css({ // вычисление координат left и top left: ($(window).width() - elem.width()) / 2 + "px", top: ($(window).height() - elem.height()) / 2 + "px" }) } })
Применение FlexboxПостепенно входят в повседневность новые возможности CSS3, такие как Flexbox. Технология помогает создавать разметку без использования float’ов, позиционирования и т.д. В том числе ее можно применять и для центрирования элементов. Например применим Flexbox для родительского элемента.wrapper и центрируем контент внутри:
Wrapper { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; height: 500px; width: 500px; } .wrapper .content { margin: auto; /* margin: 0 auto; только по горизонтали */ /* margin: auto 0; только по вертикали */ } Lorem ipsum dolor sit amet
Это правило центрирует элемент по горизонтали и вертикали одновременно — margin работает теперь не только для горизонтального выравнивания, но и для вертикального. Причем без известной ширины/высоты.
Ресурсы по теме Помощь проекту
- #side
