Выравнивание элементов
За счет того, что содержимое ячеек таблицы можно одновременно выравнивать по горизонтали и вертикали, расширяются возможности по управлению положением элементов относительно друг друга. Таблицы позволяют задавать выравнивание изображений, текста, полей формы и других элементов относительно друг друга и веб-страницы в целом. Вообще, выравнивание в основном необходимо для установки зрительной связи между разными элементами, а также их группирования.
Центрирование по вертикали
Одним из способов показать посетителю направленность и название сайта является использование сплэш-страницы. Это первая страница, на которой, как правило, расположена flash-заставка или рисунок, выражающий главную идею сайта. Изображение также является и ссылкой на остальные разделы сайта. Требуется поместить этот рисунок по центру окна браузера вне зависимости от разрешения монитора. Для этой цели можно воспользоваться таблицей с шириной и высотой равной 100% (пример 1).
Пример 1. Центрирование рисунка
В данном примере выравнивание по горизонтали устанавливается с помощью параметра align=»center» тега
, а по вертикали содержимое ячейки можно не центрировать, поскольку это положение задано по умолчанию. Использование ширины и высоты на всю доступную область веб-страницы гарантирует, что содержимое таблицы будет выравниваться строго по центру окна браузера, независимо от его размеров. Выравнивание по горизонтали За счет сочетания атрибутов align (горизонтальное выравнивание) и valign (вертикальное выравнивание) тега | , допустимо устанавливать несколько видов положений элементов относительно друг друга. На рис. 1 показаны способы выравнивания элементов по горизонтали. 
Рис. 1. Выравнивание элементов по горизонтали Рассмотрим некоторые примеры выравнивания текста согласно приведенному рисунку. Выравнивание по верхнему краю Для указания выравнивания содержимого ячеек по верхнему краю, для тега | требуется установить атрибут valign со значением top (пример 2). Пример 2. Использование valign В данном примере характеристики ячеек управляются с помощью параметров тега | , но тоже удобнее изменять через стили. В частности, выравнивание в ячейках указывается свойствами vertical-align и text-align (пример 3). Пример 3. Применение стилей для выравнивания Для сокращения кода в данном примере используется группирование селекторов, поскольку свойства vertical-align и padding применяются одновременно к двум ячейкам. Выравнивание по центру По умолчанию содержимое ячейки выравнивается по центру их вертикали, поэтому в случае разной высоты колонок требуется задавать выравнивание по верхнему краю. Иногда все-таки нужно оставить исходный способ выравнивания, например, при размещении формул, как показано на рис. 2. 
Рис. 2. Добавление формулы в документ В подобном случае формула располагается строго по центру окна браузера, а ее номер — по правому краю. Для такого размещения элементов понадобится таблица с тремя ячейками. Крайние ячейки должны иметь одинаковые размеры, в средней ячейке выравнивание делается по центру, а в правой — по правому краю (пример 4). Такое количество ячеек требуется для того, чтобы обеспечить позиционирование формулы по центру. Пример 4. Выравнивание формулы В данном примере первая ячейка таблицы оставлена пустой, она служит лишь для создания отступа, который, кстати, может быть установлен и с помощью стилей. Выравнивание элементов формы С помощью таблиц удобно определять положение полей формы, особенно, когда они перемежаются с текстом. Один из вариантов оформления формы, которая предназначена для ввода комментария, показан на рис. 3. 
Рис 3. Расположение полей формы и текста Чтобы текст возле полей формы был выровнен по правому краю, а сами элементы формы — по левому, потребуется таблица с невидимой границей и двумя колонками. В левой колонке будет размещаться собственно текст, а в правой текстовые поля (пример 5). Пример 5. Выравнивание полей формы Источник Выравнивание картинки по правому и левому краям в css В данной статье рассмотрим как выровнять картинку по правому и левому краю средствами css на сайте. Как выровнять картинку по правому краю в css Эта особенность позволяет выровнять изображение по правому и левому краю в css, а также другие элементы по краю без использования таблиц и большого количества лишнего кода. Подробную информацию как работает это свойство можно найти в поисковых системах по запросу «float css». Некорректное отображение плавающих float элементов Как писалось выше, плавающие элементы float не учитываются т. к. являются невидимыми для блочных тегов, поэтому возможно некорректное отображение: 
1 случай: элемент float выходит за границы родительского слоя. 
Как исправить некорректное отображение плавающих float элементов Для решения описанной выше проблемы, нужно указать границы завершения плавающего элемента. Поскольку плавающие элементы невидимы для блочных, нужно использовать дополнительный тег, который не будет их обтекать. В css есть свойство clear отвечающее за запрет обтекания плавающих элементов типа float. Свойство clear смещает элемент сразу под плавающий, тем самым задавая нижнюю границу и расширяя при необходимости родительский блок до окончания всех тегов типа float. В качестве расширителя границы можно использовать любой блочный тег с указанием clear. Свойство clear может принимать значения: Чаще всего для расширения границы до конца плавающего блока используется тег
, также можно использовать Выравнивание изображения по левому краю в css Примеры Пример html кода выравнивания картинки по правому краю в css(clear не нужен) Код страницы(свойство clear не нужно) Источник Выравнивание текста Выравнивание текста определяет его внешний вид и ориентацию краев абзаца и может выполняться по левому краю, правому краю, по центру или по ширине. В табл. 1 показаны варианты выравнивания блока текста. Табл. 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. Наиболее распространенный вариант — выравнивание по левому краю, когда слева текст сдвигается до края, а правый остается неровным. Выравнивание по правому краю и по центру в основном используется в заголовках и подзаголовках. Следует иметь в виду, что при использовании выравнивания по ширине в тексте между словами могут появиться большие интервалы, что не очень красиво. Для установки выравнивания текста обычно используется тег абзаца Табл. 2. Выравнивание текста с помощью параметра align | Код HTML | Описание | | Добавляет новый абзац текста, по умолчанию выровненный по левому краю. Перед абзацем и после него автоматически добавляются небольшие вертикальные отступы. | Выравнивание элементов по левому краю задано по умолчанию, поэтому указывать его лишний раз необходимости нет. Так что align=»left» можно опустить. Отличие между абзацем (тег Атрибут align достаточно универсален и может применяться не только к основному тексту, но и к заголовкам вроде . В примере 1 показано, как в подобном случае устанавливать выравнивание. Пример 1. Выравнивание текста Результат примера показан на рис. 1. 
Рис. 1. Выравнивание текста по правому и левому краю В данном примере выравнивание заголовка происходит по центру окна браузера, выделенного абзаца по правому краю, а основного текста — по левому краю. Источник Выравнивание элементов в HTML 
До сих пор мы с Вами выравнивали элементы только по левому краю. Точнее, мы с Вами вообще этим не занимались, а сам браузер по умолчанию выравнивает элементы по левому краю. Разумеется, было бы слишком скучно выравнивать всё по левому краю. Поэтому существуют различные способы выравнивания по центру и по правому краю. Ещё когда-то давно появился тег я сейчас Вам не советую его применять, ввиду наличия более современных способов, но не упомянуть я о нём не могу. Использовать его очень и очень просто. Всё, что Вам необходимо выравнять по центру, Вы помещаете внутри этого тега. Вот, например, тут мы выравниваем заголовок 1-го уровня по центру. Заголовок 1-го уровня, выравненный по центру Можно добавить картинку, выравненную также по центру, также давайте перейдём на следующую строку с помощью тега
: Заголовок 1-го уровня, выравненный по центру Чтобы решить эту проблему разработчики придумали универсальный способ выравнивания элементов HTML. Способ заключается в использовании так называемых контейнеров, которые создаются с помощью тега Давайте сейчас напишем тот же HTML-код, но с использованием контейнеров, вдобавок, давайте выравняем не по центру, а по правому краю. Заголовок 1-го уровня, выравненный по правому краю Как видите, всё работает. Советую Вам также поменять значения атрибута «align«, чтобы посмотреть на другие виды выравнивания содержимого контейнеров. А пока Ваша страница должна выглядеть так: Заголовок 1-го уровня, выравненный по центру Заголовок 1-го уровня, выравненный по правому краю Источник Элементы центра
горизонтально и вертикально Выравнивание элементов по центру Чтобы по горизонтали центрировать элемент блока (например, Установка ширины элемента предотвратит его растяжение по краям контейнера. Затем элемент будет занимать заданную ширину, а оставшееся пространство будет разделяться поровну между двумя полями: Этот элемент div центрируется. Пример Примечание: Выравнивание по центру не действует, если свойство width не задано (или установлено на 100%). Выравнивание текста по центру Чтобы просто центрировать текст внутри элемента, используйте text-align: center; Этот текст центрируется. Пример Совет: Дополнительные примеры выравнивания текста содержатся в разделе текст CSS. Центрировать изображение Чтобы центрировать изображение, установите левое и правое поле в auto и внесите его в block элемент:  Пример Выравнивание по левому и правому краю-использование положения Одним из способов выравнивания элементов является использование position: absolute; : В моей младшей и более уязвимых лет мой отец дал мне несколько советов, которые я переворачивается в моей голове до сих пор. Пример Note: Absolute positioned elements are removed from the normal flow, and can overlap elements. Выравнивание по левому и правому краю-использование float Другим методом выравнивания элементов является использование свойства float : Пример Примечание: Если элемент выше, чем элемент, содержащий его, и он плавает, он будет переполнения за пределами своего контейнера. Вы можете использовать «clearfix» Хак, чтобы исправить это (см. пример ниже). Clearfix Hack Без Clearfix 
С Clearfix 
После этого мы можем добавить overflow: auto; к содержащему элементу для того чтобы зафиксировать эту проблему: Пример Центрировать вертикально-с помощью заполнения Существует множество способов центрирования элемента по вертикали в CSS. Простое решение заключается в использовании верхнего и нижнего padding : Я вертикально центрирован. Пример Для центрирования как по вертикали, так и по горизонтали используйте padding и text-align: center : Я вертикально и горизонтально центрирован. Пример Центрировать вертикально-с помощью высоты линии I am vertically and horizontally centered. Пример .center <
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
> /* If the text has multiple lines, add the following: */
.center p <
line-height: 1.5;
display: inline-block;
vertical-align: middle;
> Центрирование по вертикали-использование положения & Transform Если padding и line-height не являются параметрами, третье решение заключается в использовании позиционирования и transform свойство: Я вертикально и горизонтально центрирован. Пример .center <
height: 200px;
position: relative;
border: 3px solid green;
> Совет: Вы узнаете больше о свойстве Transform в нашей главе 2D-преобразования. Источник Понравилась статья? Поделить с друзьями: Как сделать успешный бизнес на ритуальных услугах Выездной кейтеринг в России Риски бизнеса: без чего не обойтись на пути к успеху html выровнять блок по правому краю html выравнивание картинки по правому краю
| 