Выравнивание блока по центру экрана средствами HTML и CSS — задача, которая обязательно когда-нибудь встает перед всеми HTML-верстальщиками. Сегодня мы обсудим способы выравнивания различных элементов как по горизонтали, так и по вертикали.
При верстке сайтов довольно часто возникает необходимость выровнять тот или иной элемент шаблона по центру экрана. Причем такая необходимость может возникать при использовании различных типов верстки и по большей части от них не зависит. Довольно часто приходится выравнивать как встроенные, так и блочные элементы. Мы разберем все возможные примеры для двух типов элементов в случае горизонтального и вертикального выравнивания по центру экрана отдельно.
Горизонтальное выравнивание встроенных элементов
В принципе, со встроенными элементами, которые имеют CSS свойство display: inline; или display: inline-block; проблем с горизонтальным выравниванием быть не должно и это решается стандартным свойством text-align.
Выравнивание встроенного элемента по горизонтали:
text-align: center;
Таким способом можно выровнять текст, изображение, таблицы и другие элементы, не являющиеся блочными. Более того, можно использовать тег center, но он является устаревшим и может не пройти проверку на валидность (не проверялось, т. к. нет необходимости). Также, например, для выравнивания таблицы или блока (div) по центру можно добавить в тег table атрибут align=»center».
<center>Самый обыкновенный текст.</center>
Как видите, выровнять встроенный элемент по горизонтали — не проблема, поэтому мы двигаемся дальше.
Горизонтальное выравнивание блока (div) и других блочных элементов
В случае с блоком предыдущий пример не будет работать. Во-первых — потому что блок по умолчанию занимает 100% ширины области, в которой он находится и как его не равняй, он будет расположен всегда в одном месте, а во-вторых — потому что блочные элементы просто не поддаются некоторым CSS свойствам, которые могут применяться только для встроенных элементов.
Если вы хотите выровнять блок по центру экрана по горизонтали, то необходимо, чтобы ширина вашего блока была меньше ширины самого экрана или элемента, внутри которого он находится.
этому ширину блока нужно будет указать либо очевидно, либо в процентах от ширины родительского элемента. Проделав эти операции, вы не увидите никаких изменений на экране если у блока нет рамки и его фон не отличается от родительского, поэтому для наглядности можно временно закрасить его каким-нибудь ярким цветом и наблюдать за результатами при внесении изменений в CSS.
Теперь же осталось просто воспользоваться свойством автоматического отступа:
margin: 0 auto;
После присвоения блоку этого свойства, он переместится в центр экрана. Фактически margin: 0 auto — это сокращенная запись следующего варианта, который, как видите намного более громоздкий и не имеет права на существование, т. к. является дурным тоном и увеличивает размер файла в 4-6 раз:
margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;
Конечно так делать не рекомендуется и нужно использовать сокращенный вариант написания, а этот пример приведен лишь для наглядности, чтобы было понятно каким направлениям необходимо присвоить автоматический отступ.
Вертикальное выравнивание встроенных элементов
Для того, чтобы выровнять текст, изображение, таблицу и другие встроенные элементы по вертикали, необходимо сделать их блочными либо полностью:
display: block;
Либо только наполовину:
display: inline-block;
Вертикальное выравнивание блочных элементов
Самой распространенной проблемой начинающих верстальщиков является вертикальное выравнивание блока. Особенно проблема актуальна для блочных элементов, высота которых заранее определена. В случае, когда высота блока и высота его родителя известны заранее, проблема решается очень просто — отнимаем от высоты родительского блока высоту блока, который хотим выровнять вертикально, потом делим результат пополам (с округлением) и присваиваем отступ сверху для целевого элемента, равный полученному значению.
Например, если высота экрана или родительского элемента равна 1000 пикселей, а высота блока, который мы хотим выровнять по вертикали — 500 пикселей, то произведя необходимые вычисления, мы получим следующее:
/* (1000 - 500) / 2 = 250 */ margin: 250px auto;
Более простой, но не кроссбраузерный на 100% пример:
margin: auto;
Данный пример работает кроссбраузерно только если все величины заранее известны, но к сожалению, в большинстве случаев это не так и приходится применять более изощренные способы. Например, если вам необходимо выровнять одну строку текста по вертикали, то можно задать высоту строки, равную высоте родительского элемента при помощи line-height. Также можно воспользоваться свойством vertical-align: middle;, которое будет работать только для элементов со свойством display: inline; или display: inline-block;.
Абсолютное позиционирование элемента также можно прийти на помощь, если это необходимо. Но все зависит от конкретной ситуации, поэтому мы просто приведем всевозможные способы, благодаря которым можно выровнять блок по вертикали экрана или родительского элемента.
Отступ padding или margin
Преднамеренно увеличиваем размер родительского элемента, как бы расширяя его при помощи padding или margin:
margin: 300px 0; /* или */ padding: 300px 0;
Одна строка текста и line-height
В этом примере необходимо знать высоту родительского элемента и быть уверенным в том, что текст достаточно короткий и не будет переноситься (обычно используется для вертикальных меню в сайдбаре):
/* Например, высота родительского элемента равна 300 пикселей */ line-height: 300px;
Вертикальное выравнивание иконок или смайлов в тексте
Часто оказывается так, что высота смайла или иконки, вставленной в текст не равна высоте одной строки текста, поэтому нужно либо установить line-height, равный высоте иконки или же использовать свойство vertical-align для изображений.
vertical-align: middle;
Таблица или display: table-cell
Таблица отлично подходит для вертикального выравнивания текста и более того имеет это свойство для ячеек по умолчанию (аналоговый атрибут — valign=»middle»), однако если нужно использовать блоки, то можно присвоить им свойство display: table; и display: table-cell; (что является издевательством и полным идиотизмом), тогда обычный vertical-align заработает.
<div class="table"> <div class="td"> Самый обыкновенный текст. </div> </div>
.table { display: table; } .td { display: table-cell; }
Абсолютное позиционирование position: absolute
Иногда, когда условия позволяют это сделать, можно просто позиционировать элемент абсолютно, а не относительно, тогда CSS будет выглядеть так:
position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0;
Помимо приведенных примеров существует масса других способов и возможностей выровнять блочные и встроенные элементы по вертикали, однако приводить мы их не стали в силу того, что они слишком громоздкие или не являются кроссбраузерными, а также требуют простановки вендорных префиксов, что не очень хорошо. Нужно просто подождать пару лет, когда все браузеры подтянутся и необходимость в префиксах пропадет, тогда мы и будем использовать новые экспериментальные свойства. А мы же просто считаем, что приведенных кроссбраузерных примеров, которые проверены временем, более чем достаточно и незачем изобретать велосипед заново.
makeasite.ru
Выравнивание текста определяет его внешний вид и ориентацию краев абзаца и может выполняться по левому краю, правому краю, по центру или по ширине. В табл. 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. |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. |
Наиболее распространенный вариант — выравнивание по левому краю, когда слева текст сдвигается до края, а правый остается неровным. Выравнивание по правому краю и по центру в основном используется в заголовках и подзаголовках. Следует иметь в виду, что при использовании выравнивания по ширине в тексте между словами могут появиться большие интервалы, что не очень красиво.
Для установки выравнивания текста обычно используется тег абзаца <p> с атрибутом align, который определяет способ выравнивания. Также блок текста допустимо выравнивать с помощью тега <div> с аналогичным атрибутом align, как показано в табл. 2.
| Код HTML | Описание |
|---|---|
| <p>Текст</p> | Добавляет новый абзац текста, по умолчанию выровненный по левому краю. Перед абзацем и после него автоматически добавляются небольшие вертикальные отступы. |
| <p align="center">Текст</p> | Выравнивание по центру. |
| <p align="left">Текст</p> | Выравнивание по левому краю. |
| <p align="right">Текст</p> | Выравнивание по правому краю. |
| <p align="justify">Текст</p> | Выравнивание по ширине. |
| <nobr>Текст</nobr> | Отключает автоматический перенос строк, даже если текст шире окна браузера. |
| Текст<wbr> | Разрешает браузеру делать перенос строки в указанном месте, даже если используется тег <nobr>. |
| <div align="center">Текст</div> | Выравнивание по центру. |
| <div align="left">Текст</div> | Выравнивание по левому краю. |
| <div align="right">Текст</div> | Выравнивание по правому краю. |
| <div align="justify">Текст</div> | Выравнивание по ширине. |
Выравнивание элементов по левому краю задано по умолчанию, поэтому указывать его лишний раз необходимости нет. Так что align="left" можно опустить.
Отличие между абзацем (тег <p>) и тегом <div> в том, что в начале и конце параграфа появляется вертикальный отступ, чего нет в случае использования тега <div>.
Атрибут align достаточно универсален и может применяться не только к основному тексту, но и к заголовкам вроде <h1>. В примере 1 показано, как в подобном случае устанавливать выравнивание.
Пример 1. Выравнивание текста
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Выравнивание текста</title> </head> <body> <h1 align="center">Как поймать льва?</h1> <p align="right"><strong>Метод перебора</strong></p> <p>Делим пустыню на ряд элементарных участков, размер которых совпадает с габаритными размерами льва, но при этом меньше размера клетки. Далее простым перебором определяем участок, в котором находится лев, что автоматически приводит к его поимке.</p> <p align="right"><strong>Метод дихотомии</strong></p> <p>Делим пустыню на две половины. В одной части - лев, в другой его нет. Берем ту половину, в которой находится лев, и снова делим ее пополам. Так повторяем до тех пор, пока лев не окажется пойман.</p> </body> </html>
Результат примера показан на рис. 1.
Рис. 1. Выравнивание текста по правому и левому краю
В данном примере выравнивание заголовка происходит по центру окна браузера, выделенного абзаца по правому краю, а основного текста — по левому краю.
htmlbook.ru
Как выровнять в html текст по центру?
В HTML есть два варианта, которые не предполагают использование CSS.
- 1.Тег <center>
Очень простой в использовании тег, который выравнивает по центру все строчные элементы, которые в нём находятся, а именно:- текст,
- картинки,
- ссылки,
- а также теги <span>, <strong>, <b>, <gt;, <gt;, <input><select> и некоторые другие.
- 2.Использование HTML атрибута align cо значением center.
Этот атрибут нам нужно дописать внутри блочного тега, в котором находится текст, который нам нужно выровнять по центру.
Это может быть тег <div>, <p>, <h1> <h2>… <h6> <blockquote> <form> <section> и некоторые другие.
Так же атрибут align имеет и другие значения:
- align=’»left’ — выравнивание текста по левому краю
- align=’right’ – выравнивание по правому краю
- align=’justify’ – выравнивание текста по ширине
Как выровнять текст по центру при помощи CSS?
Лично я считаю, что использовать теги и атрибуты HTML для выравнивания текста по центру – это не самое правильное решение. Если вам нужно выровнять текст только в одном-двух местах и неохота лезть в CSS, то можно обойтись возможностями HTML, но для выравнивания по центру в нескольких местах на странице лучше использовать CSS.
Для этого у нас есть специальное свойство text-align, которое так же имеет несколько значений:
- text-align: center; — для выравнивания по центру
- text-align: left; — по левой стороне
- text-align: right; — по правой стороне
- text-align: justify; — по ширине блока или страницы.
Для того чтобы его применить к нашему тексту можно воспользоваться одним из предложенных вариантов:
- 1.Присвоить тегу блока (заголовка, формы, абзаца или другому блочному элементу) CSS класс:
А затем в CSS файле вашего сайта пишем:
Вместо block-text может быть любое другое название класса.
Если вам нужно сделать выравнивание текста по центру сразу для всех абзацев или заголовков на сайте, то не обязательно для каждого писать это CSS свойство. Достаточно задать или определить класс или идентификатор блока, внутри которого находятся эти абзацы или заголовки, а дальше в CSS файле добавить такую запись:
В этом случае выравнивание текста по центру применится для всех тегов
, которые находятся внутри тега с классом block:
Для выравнивания заголовков внутри блока с классом block запись будет немного другая:
- 2.Можно дописать нужные CSS свойства в самом теге при помощи атрибута style:
Этот способ, так же как и атрибут align или тег center, удобен только в тех случаях, когда выравнивание нужно сделать в одном или нескольких местах. Для массового выравнивания текста я его не рекомендую использовать.
На этом у меня всё! Спасибо что посетили мой сайт! Буду очень рада видеть ваши комментарии! Успехов вам и процветания!
С уважением Юлия Гусарь
impuls-web.ru
Очень часто стоит задача выровнять блок по центру страницы / экрана, да ещё и так, чтобы без ява-скрипта, без задания жёстких размеров или отрицательных отступов, ещё чтобы и скроллбары работали у родителя, если блок превышает его размеры. В сети ходят достаточно много однообразных примеров как выровнять блок по центру экрана. Как правило большинство из них основаны на одних принципах.
Ниже представлены основные способы решения задачи, их плюсы и минусы. Чтобы понимать суть примеров, рекомендую уменьшить высоту / ширину окошка Result в примерах по указанным ссылкам.
Вариант 1. Отрицательный отступ.
Позиционируем блок атрибутами top и left на 50%, и заранее зная высоту и ширину блока, задаём отрицательный margin, который равен половине размера блока. Огромным минусом данного варианта является то, что нужно подсчитывать отрицательные отступы. Так же блок не совсем корректно ведёт себя в окружении скроллбаров — он попросту обрезается так как имеет отрицательные отступы.
Пример: jsfiddle.net/serdidg/pphzjh25/1.
<div class="parent"> <div class="block"> <img src="1450829233933958453855" alt=""/> </div> </div> .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% ширина и высота. Минусом данного способ является жёсткое задание размеров.
Пример: jsfiddle.net/serdidg/sg0xbw88/1.
<div class="parent"> <div class="block"> <img src="1450829233933958453855" alt=""/> </div> </div> .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. Таблица.
Задаём родителю табличные стили, ячейке родителя устанавливаем выравнивание текста по центру. А блоку задаём модель строчного блока. Минусами мы получаем не рабочие скроллбары, и в целом не эстетичность «эмуляции» таблицы.
Пример: jsfiddle.net/serdidg/fk5nqh52/2.
<div class="parent"> <div class="inner"> <div class="block"> <img src="1450829233933958453855" alt=""/> </div> </div> </div> .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; } } Чтобы добавить скролл в данный пример, придётся добавить в конструкцию ещё один элемент.
Пример: jsfiddle.net/serdidg/fk5nqh52/3.
Вариант 4. Псевдо-элемент.
Данный вариант лишён всех проблем, перечисленных у предыдущих способов, а так же решает первоначально поставленные задачи. Суть состоит в том, чтобы у родителя задать стили псевдо-элементу before, а именно 100% высоту, выравнивание по центру и модель строчного блока. Так же само и у блока ставится модель строчного блока, выравнивание по центру. Чтобы блок не «падал» под псевдо-элемент, когда размеры первого больше чем родителя, указываем родителю white-space: nowrap и font-size: 0, после чего у блока отменяем эти стили следующими — white-space: normal. В данном примере font-size: 0 нужен для того, чтобы убрать образовавшийся пробел между родителем и блоком в связи с форматированием кода. Пробел можно убрать и иными способами, но лучшим считается просто его не допускать.
Пример: jsfiddle.net/serdidg/nfqg9rza/1.
Примеры без нулевого font-size: jsfiddle.net/serdidg/nfqg9rza/29, jsfiddle.net/serdidg/nfqg9rza/39.
<div class="parent"> <div class="block"> <img src="1450829233933958453855" alt=""/> </div> </div> .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=flexbox
Пример: jsfiddle.net/serdidg/zyzvsk9d/1.
<div class="parent"> <div class="block"> <img src="1450829233933958453855" alt=""/> </div> </div> .parent { 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%;.
Пример. jsfiddle.net/serdidg/vjxxo7ua
<div class="parent"> <div class="block"> <img src="1450829233933958453855" alt=""/> </div> </div> .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) модели. На практике использовать не рекомендую.
Пример: jsfiddle.net/serdidg/0bn8wg38.
<button class="parent"> <div class="block"> <img src="1450829233933958453855" alt=""/> </div> </button> .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; } } habr.com
Выравнивание текста по центру
Часто в декоративных целях требуется задать тексту выравнивание по центру, CSS в этом случае позволяет сократить время верстки. Раньше это делалось с помощью HTML-атрибутов, теперь же стандарт требует выравнивать текст с помощью таблиц стилей. В отличие от блоков, для которых нужно изменять внешние отступы, в CSS выравнивание текста по центру производится с помощью одной строки:
- text-align:center;
Это свойство наследуется и передается от родителя всем потомкам. Влияет не только на текст, но и на другие элементы. Для этого они должны быть строчными (например, span) или строчно-блочными (любые блоки, которым задано свойство display: block). Последний вариант позволяет также изменять ширину и высоту элемента, более гибко настраивать отступы.
Часто на страницах align приписывают к самому тегу. Это сразу делает код невалидным, так как W3C признал атрибут align устаревшим. Использование его на странице не рекомендуется.
Выравнивание блока по центру
Если нужно задать выравнивание div по центру, CSS может предложить довольно удобный способ: использование внешних отступов margin. Отступы можно задавать как блочным элементам, так и строчно-блочным. Значение свойсва должно принимать значения 0 (отступы по вертикали) и auto (автоматические отступы по горизонтали):
- margin:0 auto;
Сейчас именно этот вариант признан абсолютно валидным. Использование внешних отступов также позволяет задать выравнивание картинки по центру: CSS-свойство margin позволяет решать много проблем, связанных с позиционированием элемента на странице.
Выравнивание блока по левому или правому краю
Иногда выравнивание по центру CSS-способом не требуется, зато надо поставить два блока рядом: один с левого края, другой — с правого. Для этого существует свойство float, которое может принимать одно из трех значений: left, right или none. Допустим, у вас есть два блока, которые надо поставить рядом. Тогда код будет таким:
- .left {float:left;}
- .right{float:right}
Если есть еще и третий блок, который должен располагаться под первыми двумя блоками (например, футер), то ему необходимо прописать свойство clear:
- .left {float:left;}
- .right{float:right}
- footer {clear:both}
Дело в том, что блоки с классами left и right выпадают из общего потока, то есть все остальные элементы игнорируют само существование выравненных элементов. Свойство clear:both позволяет футеру или любому другому блоку видеть выпавшие из потока элементы и запрещает обтекание (float) как слева, так и справа. Поэтому в нашем примере футер сместится вниз.
Вертикальное выравнивание
Бывают случаи, когда недостаточно задать выравнивание по центру CSS-способами, необходимо еще изменить вертикальное положение дочернего блока. Любой строчный или строчно-блочный элемент может быть прижат к верхнему или нижнему краю, находиться посередине родительского элемента или находиться в произвольном месте. Чаще всего требуется выравнивание блока по центру, для этого используется атрибут vertical-align. Допустим, есть два блока, один вложен в другой. При этом внутренний блок — строчно-блочный элемент (display: inline-block). Необходимо выровнять блок child по вертикали:
- выравнивание по верхней границе — .child{vertical-align:top};
- выравнивание по центру — .child{vertical-align:middle};
- выравнивание по нижней границе — .child{vertical-align:bottom};
На блочные элементы ни text-align, ни vertical-align не действуют.
Возможные проблемы с выровненными блоками
Иногда выравнивание div по центру CSS-способом может вызвать небольшие проблемы. Например, при использовании float: допустим, есть три блока: .first, .second и .third. Второй и третий блоки лежат в первом. Элемент с классом second выровнен по левому краю, а последний блок — по правому. После выравнивания оба выпали из потока. Если у родительского элемента не задана высота (например, 30em), то он перестанет растягиваться по высоте дочерних блоков. Чтобы избежать этой ошибки, используют «распорку» — специальный блок, который видит .second и .third. CSS-код:
- .second{float:left}
- .third{float:right}
- .clearfix{height:0; clear: both;}
Часто используются псевдокласс :after, который тоже позволяет вернуть блоки на место с помощью создания псевдораспорки (в примере в div с классом container лежит внутри .first и содержит .left и .right):
- .left{float:left}
- .right{float:right}
- .container:after{content:»; display:table; clear:both;}
Приведенные выше варианты — самые распространенные, хотя вариаций существует несколько. Всегда можно найти наиболее простой и удобный способ создания псевдораспорки путем экспериментов.
Другая проблема, с которой часто сталкиваются верстальщики, — выравнивание строчно-блочных элементов. После каждого из них автоматически добавляется пробел. Справиться с этим помогает свойство margin, которому задается отрицательный отступ. Есть и другие способы, которые используются значительно реже: например, обнуление размера шрифта. В этом случае в свойствах родительского элемента прописывается font-size:0. Если внутри блоков располагается текст, то в свойствах строчно-блочных элементов уже возвращается нужный размер шрифта. Например, font-size:1em. Способ удобен не всегда, поэтому гораздо чаще используется вариант со внешними отступами.
Выравнивание блоков позволяет создать красивые и функциональные страницы: это и верстка общего макета, и расположение товаров в интернет-магазинах, и фотографии на сайте-визитке.
fb.ru
Выравнивание по краям HTML
По краям текст можно выровнять как при помощи тега p, так и при помощи тега div. Для этого используется атрибут align:
- align=”right” – по правому краю;
- align=”left” – по левому краю;
Например:
<p align="right">Конструктор сайтов "Нубекс"</p> <div align="left">Конструктор сайтов "Нубекс"</div>Здесь первое предложение выравнивается по правому краю при помощи тега p, второе – по левому краю при помощи тега div.
Выравнивание по ширине HTML
По ширине текст также может быть выравнен при помощи тегов p и div:
<p align="justify">Конструктор сайтов "Нубекс"</p> <div align=" justify ">Конструктор сайтов "Нубекс"</div>HTML выравнивание по центру
Выравнивание по центру с помощью HTML, как вы уже догадались, можно осуществить всеми тремя вышеуказанными способами:
<p align="center">Конструктор сайтов "Нубекс"</p> <div align=" center ">Конструктор сайтов "Нубекс"</div> <center>Конструктор сайтов "Нубекс"</center>Выравнивание CSS
Конечно, более «красиво» делать выравнивание с помощью CSS. Рассмотрим способ выравнивания текста при помощи CSS:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Выравнивание текста с помощью CSS</title> <style> .right { text-align: right; } </style> </head> <body> <div class="right">Конструктор сайтов "Нубекс"</div> </body> </html>Здесь происходит выравнивание текста по правому краю при помощи атрибута CSS text-align.
nubex.ru
Основные тонкости
В первую очередь следует заметить, что эта графическая форма представления данных позволяет структурировать информацию, что значительно облегчает ее усвоение. Внутри ячеек таблицы может находиться практически любой контент: от текста до видеоролика. При этом важно учесть не только размер, но и его расположение.
Как сделать саму таблицу по центру
Чаще всего нужно оформить таблицу по центру страницы, хотя изначально она прижата к левой стороне страницы. Для того чтобы выровнять её по центру, нужно задать ей свойство margin со значением auto.
<table style="margin: auto;"> ... </table>Это приводит к тому, что отступы таблицы вычисляются автоматически. После этого таблица будет находиться по центру страницы.
Выравнивание по центру в ячейках
Не менее часто требуется выровнять данные по центру ячейки. При этом существует три способа: горизонтальный, вертикальный и абсолютный. Из их названия понятно, по какой оси будет происходить центрирование. В любом случае используется тег <td>, отвечающий за конкретную ячейку в строке. Далее необходимо присвоить его атрибутам valign (вертикаль) и/или align (горизонталь) значение "center", в зависимости от вашей задачи:
<table> <tr> <td valign="center" align="center">Текст по центру ячейки</td> </tr> </table>Если вы хотите сделать такое форматирование стандартным для всего сайта или страницы (чтобы не переписывать каждую таблицу), то следует использовать CSS-стили. Для этого допишите следующий код внутри тега <head>:
<style type="text/css"> table { align: center; // Для выравнивания содержимого таблицы по центру по горизонтали vertical-align: middle; // Для выравнивания содержимого таблицы по центру по вертикали } </style>С помощью этого способа также можно задать выравнивание как для конкретной ячейки, так и для столбца, строки или всей таблицы в целом. Как можно заметить, любой из способов весьма прост.
webshake.ru
CSS — Выравнивание блока по центру
1. Выравнивание одного блока по центру другого. При этом первый и второй блок имеют динамические размеры.
HTML-код:
<div class="parent"> ... <div class="child"> ... </div> </div>
CSS-код:
.parent { position: relative; } .child { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
Браузеры, которые поддерживают данное решение:
- Chrome 4.0+
- Firefox 3.6+
- Internet Explorer 9+
- Opera 10.5+
- Safari 3.1+
2. Выравнивание одного блока по центру другого. При этом второй блок имеет фиксированные размеры.
.parent { position: relative; } .child { position: absolute; left: 50%; top: 50%; /* ширина и высота 2 блока */ width: 500px; height: 250px; /* Значения определяются в зависимости от его размера */ /* margin-left = - width / 2 */ margin-left: -250px; /* margin-top = - height / 2 */ margin-top: -125px; }
Браузеры, которые поддерживают данное решение:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 4.0+
- Opera 7.0+
- Safari 1.0+
3. Выравнивание одного блока по центру другого. При этом второй блок имеет размеры, заданные в процентах.
.parent { position: relative; } .child { position: absolute; /* ширина и высота 2 блока в % */ height: 50%; width: 50%; /* Значения определяются в зависимости от его размера в % */ left: 25%; /* (100% - width) / 2 */ top: 25%; /* (100% - height) / 2 */ }
Браузеры, которые поддерживают данное решение:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 4.0+
- Opera 7.0+
- Safari 1.0+
CSS — Выравнивание по горизонтали
1. Выравнивание одного блочного элемента (display: block) относительно другого (в котором он расположен) по горизонтали:
HTML-код:
<div> ... <div class="block"> ... </div> </div>
CSS-код:
.block { margin-left: auto; margin-right: auto; }
Браузеры, которые поддерживают данное решение:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 6.0+
- Opera 3.5+
- Safari 1.0+
2. Выравнивание строчного (display: inline) или строчно-блочного (display: inline-block) элемента по горизонтали:
HTML-код:
<div class="parent"> ... <div class="child"> ... </div> </div>
CSS-код:
.parent { text-align: center; } .child { 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.
HTML-код:
<div class="parent"> ... <div class="child"> ... </div> </div>
CSS-код:
.parent { line-height: 500px; } .child { display: inline-block; vertical-align: middle; }
Браузеры, которые поддерживают данное решение:
- Chrome 1.0+
- Firefox 3.0+
- Internet Explorer 8.0+
- Opera 7.0+
- Safari 1.0+
2. Центрирования одного блока относительно другого по вертикали посредством представления родителя как таблицы, а ребёнка как ячейки этой таблицы.
.parent { display: table; } .child { display: table-cell; vertical-align: middle; }
Браузеры, которые поддерживают данное решение:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 8.0+
- Opera 7.5+
- Safari 1.0+
Если Вы знаете какие-нибудь другие интересные хитрости или полезные готовые решения по выравниванию, то поделитесь ими в комментариях.
itchief.ru