Команда в css для выравнивания по центру. Выравнивание блока div со свойством position:absolute или fixed по центру
Часто на практике приходится решать задачу группирования и выравнивания контента средствами CSS. Сегодня мы рассмотрим основные способы размещения элементов в горизонтальный ряд.
Материал данной статьи призван помочь начинающим веб-дизайнерам в освоении приемов верстки web-страниц.
Из чего выбрать или методы
Существует несколько способов расположения структурных элементов в ряд в горизонтальной плоскости. Наиболее полезными, с точки зрения практического применения, являются:
- метод «Float»
- метод «Inline-block»
- метод «Table-cell»
Каждый из них имеет свои преимущества, области применения и недостатки. Рассмотрим их по порядку.
«Для рывка» или немного теории
Все структурные элементы HTML можно условно разделить на:
Инлайновые (встроенные) – типа img, span и им подобные. У нас нет возможности менять их фон и задавать им произвольные линейные размеры.
Блочные – занимающие всю ширину родительского блока, всегда начинаются с новой строки – p, h, div .
Наглядный пример встроенных и блочных структур приведен ниже:
Метод «Float»
Как уже известно (см. выше), блочный элемент размещается с новой строки вне зависимости от заданной ему ширины (width ). По этому, уменьшая горизонтальный размер div -а, в рядок блочки не построить.
Наиболее популярный (особенно среди начинающих верстальщиков), метод решения это использование свойства float .
CSS свойство float обрело большую популярность и практическую ценность после перехода от табличного способа верстки к блочному.
Float: left (right) трансформирует блочный элемент в плавающий, выравнивает по левому (правому) краю родительского блока и устанавливает обтекание справа (слева) текстом и другими элементами.
Для примера, создадим четыре блока, которые нужно разместить в ряд:
< html> < head> < meta charset= "utf-8" > < link rel= "stylesheet" media= "all" type= "text/css" href= "style.css" /> head> < body> < div class = "bblock" > Строим div> < div class = "bblock" > горизонтальный div> < div class = "bblock" > ряд div> < div class = "bblock" > из дивов div> body> html>
И внешнюю таблицу стилей с следующим содержимым:
div { float: left; /*Задаем обтекание*/ line- height: 120px; font- size: 40px; background: dodgerblue; color: white; margin- top: 60px; width: 320px; /*Фиксируем ширину блока*/ }
В результате получаем четыре блока, расположенные в горизонтальный ряд и выровненные по левому краю родительского блока:
Иногда на практике бывает необходимо выровнять блоки по правому краю родительского элемента. Изменим обтекание блоков в предыдущем примере:
float: right;
Обратите внимание на надписи, расположенные в блоках. На первый взгляд может показаться, что пример отработал криво. Но на самом деле, браузер обработал код правильно: прочитал блоки сверху вниз, и сделал то, что мы от него просили - выровнял по правому краю. Учтите этот момент при использовании свойства float: right .
Для того, чтобы прервать обтекание элементов с какого-то конкретного места, используйте строчку:
< div style= "clear: both;" > div>
В рассмотренном выше примере расстояния между блоками мы задавали при помощи отступа margin-right . Но что делать, если у вас при верстке страницы возникла задача: разместить блоки в ряд, центрировать их, да и еще чтобы отступы были только между ними, но никак не снаружи?
Алгоритм действий следующий.
< div class = "wrap" > < div class = "bblock" > Строим div> < div class = "bblock" > горизонтальный div> < div class = "bblock" > ряд div> < div class = "bblock" > из дивов div> div>
Wrap { width: 1310px; /*фиксируем ширину обертки*/ margin: 0 auto; /*центрируем ее*/ background: darkgray; height: 120px; /*Задаем высоту обертки*/ } . bblock { float: left; /*Задаем обтекание*/ line- height: 120px; /*Высота строки + верт. центрирования текста*/ font- size: 40px; background: dodgerblue; color: white; width: 320px; /*Фиксируем ширину блока*/ margin- right: 10px; text- align: center; /*Центрируем текст по горизонтали*/ } . wrap : last- child { margin- right: 0px; /*Убираем поле последнего div-а*/ }
В результате получаем такую картину:
Ну что же, всех практических ситуаций не рассмотришь, по этому перейдем к общим особенностям.
Важно!!!
Метод «Inline-block»
Как строчные так и блочные элементы имеют свои преимущества и недостатки в контексте каждой конкретной решаемой задачи. А что если объединить их преимущества?
Встречайте, гвоздь программы – свойство display: inline-block .
display: inline-block генерирует блочно-строчный элемент, который по сути является строчным, но сохраняет блочные свойства – позволяет изменять линейные размеры, задавать поля, отступы и т.д.
Блочно-строчный элемент имеет следующие свойства:
- высота и ширина блока определяется автоматически по содержимому и значению отступов (padding )
- высота и ширина блока может быть задана фиксировано
- Отсутствует эффект схлопывания границ .
Рассмотрим пример создания простого навигационного меню, содержащего картинку и ссылку.
< div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> p> < p class = "string" >< a href= "#" > Ссылка меню 1 длиннее обычного a> p> div> < div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> p> < p class = "string" >< a href= "#" > Ссылка меню 2 a> p> div> < div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> p> < p class = "string" >< a href= "#" > Ссылка меню 3 a> p> div> < div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> p> < p class = "string" >< a href= "#" > Ссылка меню 4 a> p> div>
Nav { display: inline- block; /*Задаем блочно-строчное отображение*/ width: 180px; /*задаем ширину блока*/ background: dodgerblue; } . string { text- align: center; /*Равняем текст по-горизонтали*/ }
В результате получаем такую менюшку:
Как видим, получилось кривовато... Но расстраиваться мы не намерены, по-этому применяем к нашим дивам CSS свойство vertical-align (подробнее см. ниже):
vertical- align: top;
Теперь наша навигационная панель выровнялась по верхней линии:
Конечно, приведенный пример является примитивным, но я уверен, что на его основе вы сможете создать настоящий шедевр!!!
Важно!!!
- Для древних версий Firefox добавляем строчку:
display: - moz- inline- stack;
и оборачиваем элемент в дополнительную div-обертку. - IE 7 и более ранние версии - добавляем строчки:
zoom: 1 ; /*задаем hasLayout*/ * display: inline; /*звездочка – хак для IE */ _height: 250px; /*в IE6 не работает min-height*/
- Замечу, что на указанные строчки избирательно реагируют конкретные браузеры (на первую – Firefox, на остальные - IE).
Метод «Table»
Табличный подход долгое время был стандартом верстки, что в первую очередь объяснялось простотой и интуитивной понятностью разметки. Скорее всего, именно это и послужило причиной появления табличного форматирования в CSS.
Свойства display: table (table-cell , inline-table ), позволяют выполнять табличное форматирование элементов без применения HTML таблиц.
Для горизонтального размещения блоков нам понадобится родительский элемент, имеющий свойство display: table
, и дочерние элементы (ячейки), имеющие свойство display: table-cell
:
< div class = "wrap" > < div class = "bblock" > Строим div> < div class = "bblock" > табличный div> < div class = "bblock" > ряд div> < div class = "bblock" > из дивов div> div>
Bblock { display: table- cell; font- size: 32px; width: 200px; height: 200px; background: gold; text- align: center; vertical- align: middle; } . wrap { display: table; border- spacing: 20px 20px; background- color: darkgray; }
Важно!!!
- В отличии от методов «Inline-block» и «float», при уменьшении ширины окна веб-браузера, ячейки не перемещаются вниз.
- У вас нет возможности задавать свойство margin для ячеек псевдотаблицы.
- Кросс-браузерность. Свойства из семейства display: table* не поддерживаются IE6, IE7. Кроме того, в IE8 вы можете наблюдать динамическую ошибку рендеринга псевдотабличных элементов в виде рандомно пропадающих ячеек. Данная ошибка чаше всего проявляется при первичной прорисовке документа
Выравнивание элементов по горизонтали и вертикали можно сделать различными способами. Выбор способа зависит от типа элемента (блочный или строчный), от типа его позиционирования, размеров и т.д.
1. Горизонтальное выравнивание по центру блока/страницы
1.1. Если для блока задана ширина:
div { width: 300px; margin: 0 auto; /*центрируем элемент по горизонтали в пределах родительского блока*/ }Если нужно выровнять строчный элемент таким способом, ему нужно задать display: block;
1.2. Если блок вложен в другой блок и для него не задана/задана ширина:
1.3. Если для блока задана ширина и его нужно зафиксировать по центру родительского блока:
1.4. Если для блоков не задана ширина, можно центрировать с помощью родительского блока-обертки:
2. Вертикальное выравнивание
2.1. Если текст занимает одну строчку, например, для кнопок и пунктов меню:
.button { height: 50px; line-height: 50px; }2.2. Для выравнивания блока по вертикали внутри родительского блока:
2.3. Вертикальное выравнивание по типу таблицы:
2.4. Если для блока задана ширина и высота, и его нужно выровнять по центру родительского блока:
2.5. Абсолютное позиционирование по центру страницы/блока с помощью CSS3-трансформации:
если для элемента заданы размеры
div { width: 300px; /*задаем ширину блока*/ height:100px; /*задаем высоту блока*/ transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; }
если для элемента не заданы размеры и он не пустой
Some text here
Сегодня урок на тему выравнивания блоков div с помощью технологии CSS по центру.
Здесь есть несколько моментов, которые не совсем просто воспринимаются. На одном из них мне бы хотелось сегодня остановиться.
Когда блоки идут в нормальном потоке, выровнять один, по центру, относительно родительского блока, в котом он находиться, не составляет особого труда.
Для этого используется стандартная CSS конструкция .
Но, что делать, если блок, который нужно выровнять по центру имеет абсолютное (absolute) или фиксированное положение (fixed). Такая ситуация иногда бывает.
Т.е. в данном случае наш пример принимает следующий вид.
position:relative; - у родительского блока было добавлено, чтобы отсчет шел именно с него, а не с тэга
position:absolute; - собственно говоря, само абсолютное позиционирование.
После произведенной манипуляции margin:auto работать уже перестает.
Как быть? Как можно снова выровнять блок по центру?
Сегодня я расскажу о трюке, который используется в этом случае. На самом деле все достаточно просто, нужно только добавить два CSS-свойства для выравниваемого блока.
left:50%; - смещаем блок относительно родительского на 50% влево.
margin-left:-150px; - т.к. отсчет идет с левого верхнего края блока, то для полной ровности, половину блока нужно сместить влево, что мы и делаем отрицательным отступом.
Если ширина блока задается в процентах , то решение может быть следующим:
Если по центру нужно выровнять строку с текстом:
Строка текста
Дело в том, что, когда блоку присваивается свойство с position:absolute. Ширина блока с значением width:auto по умолчанию, становиться равной содержимому. Поэтому свойство text-align не будет работать. Чтобы все начало работать, нужно принудительно увеличить ширину до 100%.
Доброго времени суток, подписчики и читатели данной публикации. Сегодня я хочу вдаться в подробности и рассказать вам, как в css выровнять текст по центру. В некоторых предыдущих статьях я косвенно затрагивал данную тему, поэтому кое-какие знания в этой области у вас имеются.
Однако в данной публикации я расскажу вам о всевозможных способах выравнивания объектов, а также объясню, как делать отступы и красные строки в абзацах. Так что давайте приступать к изучению материала!
Html и его детища и align
Данный способ почти не используется, так как его вытеснили инструменты каскадных стилевых таблиц. Однако знание, что такой тег существует, вам не помешает.
Что касается валидации (данный термин подробно описан в статье « »), то в самой спецификации html осуждается использование < center> , так как для валидности необходимо использовать переходной DOCTYPE> .
Такой тип пропускает запрещенные элементы.
Теперь перейдем к атрибуту align . Он задает горизонтальное выравнивание объектов на и вписывается после объявления тега. Обычно с его помощью контент можно выровнять по левому краю (left ), по правому краю (right ), по центру (center ) и по ширине текста (justify ).
Ниже я приведу пример, в котором картинку и абзац расположу по центру.
Этот контент будет расположен по центру.
Заметьте, что для картинки разбираемый нами атрибут имеет несколько другие значения.
В примере я использовал align=" middle" . Благодаря этому изображение выровнялось так, что предложение расположилось четко посредине картинки.
Инструменты центрирования в css
Css-свойствами, предназначенными для выравнивания блоков, текстового и графического контента, пользуются намного чаще. Это связанно в первую очередь с удобством и гибкостью реализации стилей.
Итак, начнем с первого свойства центрирования текста — это text- align .
Оно функционирует так же, как и align в . Среди ключевых слов можно выбрать одно из общего списка или унаследовать характеристики предка (inherit ).
Хочу отметить, что в css3 можно установить еще 2 параметра: start – в зависимости от правил написания текста (справа налево или наоборот) устанавливает выравнивание слева или справа (аналогично работе left или right) и end – противоположен start (при написании текста слева направо действует как right, при написании справа налево – left).
Предложение справа
Предложение c использованием end
Расскажу о небольшой фишке. При выборе значения justify последняя строка может некрасиво болтаться снизу. Для того чтобы ее, например, расположить по центру, можно воспользоваться свойством text-align-last .
Для выравнивания содержимого сайта или ячеек таблиц по вертикали используется свойство vertical-align . Ниже я описал основные ключевые слова элемента.
Ключевое слово | Предназначение |
baseline | Указывает выравнивание по линии предка, которая называется базовой. Если такой линии у объекта-предка не имеется, то выравнивание происходит по нижнему border-у. |
middle | Середина видоизменяемого объекта выравнивается по базовой линии, к которой добавляется пол высоты элемента-родителя. |
bottom | Нижняя часть выбранного контента подстраивается под основание объекта, находящегося ниже всех. |
top | Аналогично bottom, только с верхней частью объекта. |
super | Делает символ надстрочным. |
sub | Делает элемент подстрочным. |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
ЦВЕТОК
|
Отступы
И наконец мы дошли с вами до отступов в абзаце. В языке css используется специальное свойство под названием text-indent .
С его помощью можно сделать как красную строку, так и выступ (нужно указать отрицательное значение).
Для создания красной строки нужно знать всего лишь один параметр.
Им является простое свойство text-indent.
Существует несколько принципиально отличающихся способов для того чтобы отцентрировать объект по вертикали с помощью 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 A CompanyPage 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.
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 лишние отступы вокруг меню
- #side