Все способы вертикального выравнивания в CSS. Выравнивание элементов Html выравнивание в ячейке
Содержимое ячеек может быть выровнено по левому краю, по правому краю или по центру. На новом рабочем листе все ячейки имеют формат Обычный , в котором числа, даты и время выравниваются по правому краю ячейки, текст – по левому, а логические значения ИСТИНА и ЛОЖЬ – центрируются. Изменение выравнивания не влияет на тип данных. Для выравнивания содержимого ячеек необходимо:
выделить ячейки, которые следует отформатировать;
в менюФормат выбрать команду Ячейки ;
выбрать вкладыш Выравнивание (рис.22);
в поле списка по горизонтали выбирается тип выравнивания по горизонтали:
по значению – выравнивание по умолчанию в зависимости от типа данных;
по левому краю (отступ) – содержимое ячейки выравнивается по левому краю с отступом, указанным в поле справа;
по центру – содержимое ячейки центрируется;
по правому краю – содержимое ячейки выравнивается по правому краю;
с заполнением – содержимое выделенного диапазона заполняется символами, указанными в левой ячейке выбранного диапазона;
по ширине – содержимое ячейки разбивается на несколько строк, а пробелы между словами устанавливаются так, чтобы ширина строк соответствовала ширине ячейки;
по центру выделения – содержимое левой ячейки выделенного диапазона выравнивается по центру диапазона (все другие ячейки выделенного диапазона должны быть пустыми);
в поле списка по вертикали выбирается тип выравнивания по вертикали:
по верхнему краю – содержимое ячейки выравнивается по верхнему краю;
по центру – по центру;
по нижнему краю – по нижнему краю;
по высоте – содержимое ячейки разбивается на несколько строк, первая и последняя строки выравниваются по верхней и нижней границе ячейки;
в группе флажков Отображение можно включить следующие режимы:
переносить по словам – по достижению правой границы ячейки текст будет переноситься на новую строку;
автоподбор ширины – размер символов уменьшается так, что содержимое ячейки помещается в границах ячейки;
объединение ячеек – выделенные ячейки объединяются в одну;
в рамке Ориентация выбирается направление расположения текста в ячейке – текст можно расположить вертикально или под углом.
Для быстрого выравнивания данных в ячейках используются кнопки .
Чтобы выровнять текст по центру нескольких столбцов, необходимо:
Установление шрифта
Для установления шрифта необходимо:
выделить группу ячеек;
в меню Формат выбрать команду Ячейки ;
выбрать вкладыш Шрифт (рис.23);
в списке Шрифт выбирается тип шрифта;
в поле Начертание выбирается начертание шрифта:
обычный – обычное начертание;
курсив – курсивное начертание ;
полужирный – жирное начертание ;
полужирный курсив – жирное курсивное начертание .
в поле Размер – размер шрифта в пунктах (1 пункт = 0,375мм).
в поле Подчеркивание – тип линии подчеркивания:
Нет – подчеркивание не используется;
Одинарное, по значению – подчеркивание символов одинарной линией;
Двойное, по значению – подчеркивание символов двойной линией;
Одинарное, по ячейке – подчеркивание одинарной линией по ширине ячейки;
Двойное, по ячейке – подчеркивание двойной линией по ширине ячейки;
в поле Цвет – цвет символов;
в рамке Эффекты можно установить флажки:
зачеркнутый – зачеркивание текста одинарной линией;
верхний индекс – размер символов уменьшается, текст располагается выше;
нижний индекс – размер символов уменьшается, текст располагается ниже;
если установить флажок Обычный , то в ячейке установится шрифт по умолчанию;
щелкнутьОК .
Для быстрого форматирования символов используется панель инструментов Форматирование .
Я думаю, многие из вас, кому приходилось заниматься версткой, сталкивались с необходимостью выравнивать элементы по вертикали и знают, какие сложности возникают при выравнивании элемента по центру.
Да, для вертикального выравнивания в CSS есть специальное свойство vertical-align с множеством значений . Однако на практике оно работает совсем не так, как ожидается. Давайте попробуем в этом разобраться.
Сравним следующие подходы. Выравнивание с помощью:
- таблицы,
- отступов,
- line-height ,
- растягивания,
- отрицательного margin ,
- transform ,
- псевдоэлемента,
- flexbox .
Есть два элемента div , при этом один из них вложен в другой. Дадим им соответствующие классы − outer и inner .
Задача состоит в том, чтобы выровнять внутренний элемент по центру внешнего элемента.
Для начала рассмотрим случай, когда размеры внешнего и внутреннего блока известны . Добавим внутреннему элементу правило display: inline-block , а внешнему − text-align: center и vertical-align: middle .
Нпомню, что выравнивание применяется только к элементам, которые имеют режим отображения inline или inline-block .
Зададим блокам размеры, а также фоновые цвета, чтобы видеть их границы.
Outer {
width: 200px;
height: 200px;
text-align: center;
vertical-align: middle;
background-color: #ffc;
}
.inner {
display: inline-block;
width: 100px;
height: 100px;
background-color: #fcc;
}
После применения стилей мы увидим, что внутренний блок выровнялся по горизонтали, а по вертикали нет:
http://jsfiddle.net/c1bgfffq/
Почему так произошло? Дело в том, что свойство vertical-align влияет на выравнивание самого элемента, а не его содержимого (кроме случаев, когда оно применяется к ячейкам таблицы). Поэтому применение данного свойства к внешнему элементу ничего не дало. Более того, применение этого свойства к внутреннему элементу также ничего не даст, поскольку строчные блоки (inline-block) выравниваются по вертикали относительно соседних блоков, а в нашем случае у нас один строчный блок.
Для решения данной проблемы существует несколько техник. Ниже подробнее рассмотрим каждую из них.
Выравнивание с помощью таблицы
Первое приходящее на ум решение − заменить внешний блок таблицей из одной ячейки. В этом случае выравнивание будет применяться к содержимому ячейки, то есть к внутреннему блоку.
http://jsfiddle.net/c1bgfffq/1/
Очевидный минус данного решения – с точки зрения семантики неправильно применять таблицы для выравнивания. Второй минус в том, что для создания таблицы требуется добавить еще один элемент вокруг внешнего блока.
Первый минус можно частично убрать, заменив теги table и td на div и задав табличный режим отображения в CSS.
.outer-wrapper { display: table; } .outer { display: table-cell; }
Тем не менее внешний блок все равно останется таблицей со всеми вытекающими из этого последствиями.
Выравнивание с помощью отступов
Если высоты внутреннего и внешнего блока известны, то выравнивание можно задать с помощью вертикальных отступов у внутреннего блока, используя формулу: (H outer – H inner) / 2.Outer {
height: 200px;
}
.inner {
height: 100px;
margin: 50px 0;
}
http://jsfiddle.net/c1bgfffq/6/
Минус решения - оно применимо лишь в ограниченном числе случаев, когда известны высоты обоих блоков.
Выравнивание с помощью line-height
Если известно, что внутренний блок должен занимать не более одной строки текста, то можно воспользоваться свойством line-height и задать его равным высоте внешнего блока. Поскольку контент внутреннего блока не должен переноситься на вторую строку, рекомендуется также добавить правила white-space: nowrap и overflow: hidden .Outer {
height: 200px;
line-height: 200px;
}
.inner {
white-space: nowrap;
overflow: hidden;
}
http://jsfiddle.net/c1bgfffq/12/
Также данную технику можно применять и для выравнивания многострочного текста, если для внутреннего блока переопределить значение line-height , а также добавить правила display: inline-block и vertical-align: middle .
Outer {
height: 200px;
line-height: 200px;
}
.inner {
line-height: normal;
display: inline-block;
vertical-align: middle;
}
http://jsfiddle.net/c1bgfffq/15/
Минус данного способа заключается в том, что должна быть известна высота внешнего блока.
Выравнивание с помощью "растягивания"
Данный способ можно применять, когда высота внешнего блока неизвестна, но известна высота внутреннего.Для этого нужно:
- задать внешнему блоку относительное позиционирование, а внутреннему − абсолютное;
- добавить внутреннему блоку правила top: 0 и bottom: 0 , в результате чего он растянется на всю высоту внешнего блока;
- установить значение auto для вертикальных отступов внутреннего блока.
http://jsfiddle.net/c1bgfffq/4/
Суть этой техники заключается в том, что задание высоты для растянутого и абсолютно спозиционированного блока заставляет браузер вычислять вертикальные отступы в равном соотношении, если их значение установлено в auto .
Выравнивание с помощью отрицательного margin-top
Этот способ получил широкую известность и применяется очень часто. Как и предыдущий, он применяется, когда высота внешнего блока неизвестна, но известна высота внутреннего.Нужно задать внешнему блоку относительное позиционирование, а внутреннему − абсолютное. Затем необходимо сдвинуть внутренний блок вниз на половину высоты внешнего блока top: 50% и поднять вверх на половину собственной высоты margin-top: -H inner / 2.
Outer {
position: relative;
}
.inner {
height: 100px;
position: absolute;
top: 50%;
margin-top: -50px;
}
http://jsfiddle.net/c1bgfffq/13/
Минус данного способа - должна быть известна высота внутреннего блока.
Выравнивание с помощью transform
Данный способ похож на предыдущий, но он может быть применен, когда высота внутреннего блока неизвестна. В этом случае вместо задания отрицательного отступа в пикселях можно воспользоваться свойством transform и поднять внутренний блок вверх с помощью функции translateY и значения -50% .Outer {
position: relative;
}
.inner {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
http://jsfiddle.net/c1bgfffq/9/
Почему в предыдущем способе нельзя было задать значение в процентах? Так как процентные значения свойства margin вычисляются относительно родительского элемента, значение в 50% равнялось бы половине высоты внешнего блока, а нам нужно было поднять внутренний блок на половину его собственной высоты. Для этого как раз подходит свойство transform .
Минус данного способа - он не может быть применен, если внутренний блок имеет абсолютное позиционирование.
Выравнивание с помощью Flexbox
Самый современный способ вертикального выравнивания это использовать Flexible Box Layout (в народе известен как Flexbox). Данный модуль позволяет гибко управлять позиционированием элементов на странице, располагая их практически как угодно. Выравнивание по центру для Flexbox − очень простая задача.Внешнему блоку необходимо задать display: flex , а внутреннему − margin: auto . И это все! Красиво, правда?
Outer {
display: flex;
width: 200px;
height: 200px;
}
.inner {
width: 100px;
margin: auto;
}
http://jsfiddle.net/c1bgfffq/14/
Минус данного способа − Flexbox поддерживается только современными браузерами.
Какой способ выбрать?
Нужно исходить из постановки задачи:- Для вертикального выравнивания текста лучше использовать вертикальные отступы или свойство line-height .
- Для абсолютно позиционированных элементов с известной высотой (например, иконок) идеально подойдет способ с отрицательным свойством margin-top .
- Для более сложных случаев, когда неизвестна высота блока, нужно использовать псевдоэлемент или свойство transform .
- Ну а если вам повезло настолько, что не нужно поддерживать старые версии браузера IE, то, конечно, лучше использовать Flexbox .
Теги: Добавить метки
3.7. Выравнивание таблицы и содержимого ячеек
Для выравнивания элементов таблиц по горизонтали и вертикали в элементах TABLE, TR, TH и TD используют атрибуты align и valign.
Атрибут align применяется ко всем элементам таблицы и определяет общее горизонтальное выравнивание:
| – заголовка таблицы по левому краю/правому краю/по центру (по умолчанию по центру);
| – данных в ячейке по левому краю/ правому краю/по центру/по заданному символу (по умолчанию по левому краю). Атрибут valign также применяется ко всем элементам таблицы и определяет общее вертикальное выравнивание:
|
|---|
