Выравнивание

Руководство по выравниванию элементов в CSS

Текст внутри блочных элементов можно выровнять, правильно настроив выравнивание текста с помощью text-align .

Смотрите Руководство по форматированию текста в CSS, чтобы узнать больше о форматировании текста.

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

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

Правила в приведенном выше примере выравнивают элемент по горизонтали по центру.

Значение auto для свойства margin не будет работать в Internet Explorer 8 и более ранних версиях, если не указан .

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

CSS-свойство position вместе со свойством left , right , top и bottom можно использовать для выравнивания элементов относительно области просмотра документа или содержащего родительский элемент.

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

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

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

Очистка (clear) плавающего элемента (float)

Одна из самых запутанных вещей в работе с разметкой на основе плавающего элемента — это сворачивающийся (collapsed) родительский элемент. Родительский элемент не растягивается автоматически для размещения плавающих элементов.

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

Есть несколько способов исправить эту проблему с коллапсом (collapsed) родительского CSS. Вот несколько решений вместе с живыми примерами.

Решение 1: Float для Container

Самый простой способ решить эту проблему — переместить содержащий родительский элемент.

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

Решение 2: Использование пустого Div

Это старомодный способ, но это простое решение, которое работает во всех браузерах.

.clearfix < clear: both; >/* html code snippet */ 

Решение 3: Использование псевдоэлемента :after

Псевдоэлемент :after в сочетании со свойством content довольно широко используется для решения проблем очистки элементов float .

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

Internet Explorer IE7 не поддерживает псевдоэлемент :after . IE8 поддерживает, но требует объявления .

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.

Похожие посты

Руководство по свойству opacity в CSS

CSS-свойство opacity означает непрозрачность и теперь является частью спецификаций CSS3. Старые браузеры имеют разные способы управления непрозрачностью. Opacity в Firefox, Safari, Chrome, Opera и IE9 Вот самый простой синтаксис для назначения непрозрачности CSS во всех современных браузерах. Приведенное выше правило сделает элемент абзаца непрозрачным на 70% (или прозрачным на 30%). Свойство opacity принимает значение от…

Руководство по таблицам в CSS

Таблицы обычно используются для отображения каких-либо упорядоченных табличных данных. После того, как вы создали HTML-таблицу, с помощью CSS вы можете значительно улучшить ее внешний вид. CSS предоставляет несколько свойств, которые позволяют вам управлять компоновкой и представлением элементов таблицы. В этом разделе вы увидите, как использовать CSS для стилизации таблиц. Добавление границ (border) в таблицы CSS-свойство…

Руководство по свойству margin в CSS

CSS-свойство margin позволяют вам установить интервал вокруг границы элемента (или края блока элемента, если у него нет определенной границы). На цвет элемента не влияет цвет фона background-color, он всегда прозрачен. Однако, если родительский элемент имеет цвет фона, он будет виден через область margin. Margin для отдельных сторон Вы можете установить margin для отдельных сторон используя…

Разработка сайтов для бизнеса

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

Источник

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

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

Центрирование по вертикали

Одним из способов показать посетителю направленность и название сайта является использование сплэш-страницы. Это первая страница, на которой, как правило, расположена flash-заставка или рисунок, выражающий главную идею сайта. Изображение также является и ссылкой на остальные разделы сайта. Требуется поместить этот рисунок по центру окна браузера вне зависимости от разрешения монитора. Для этой цели можно воспользоваться таблицей с шириной и высотой равной 100% (пример 1).

Пример 1. Центрирование рисунка

Чтобы высота таблицы устанавливалась как 100%, необходимо убрать , код при этом перестает быть валидным.

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

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

Рис. 1. Выравнивание элементов по горизонтали

Рассмотрим некоторые примеры выравнивания текста согласно приведенному рисунку.

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

Пример 2. Использование valign

       
 
Колонка 1
 
Колонка 2
 
 
  

Пример 3. Применение стилей для выравнивания

Для сокращения кода в данном примере используется группирование селекторов, поскольку свойства vertical-align и padding применяются одновременно к двум ячейкам.

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

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

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

Рис. 2. Добавление формулы в документ

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

Пример 4. Выравнивание формулы

       
 
 
(18.6)
 
 
  

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

Выравнивание элементов формы

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

Рис 3. Расположение полей формы и текста

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

Пример 5. Выравнивание полей формы

       
  Имя E-mail Комментарий  
  

В данном примере, для тех ячеек, где требуется задать выравнивание по правому краю, добавлен атрибут align=»right» . Чтобы надпись «Комментарий» располагалась по верхней границе многострочного текста, для соответствующей ячейки устанавливается выравнивание по верхнему краю с помощью атрибута valign .

Источник