Как выровнять картинку и текст по вертикали css

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

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

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

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

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

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

Приветствую вас на сайте Impuls-Web!

Делая верстку страницы, вы неизбежно столкнетесь с необходимостью сделать выравнивание текста по вертикали css, и у начинающих веб-разработчиков это может вызвать некоторые сложности.

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

Property Values

Floater Div

This last method requires an empty div which is floated and used to control where our child element sits in the document flow. Notice the floater div comes before our child div in the html below.

css

#parent {height 250px;}

#floater {

    float left;

    height 50%;

    width 100%;

    margin-bottom -50px;

}

#child {

    clear both;

    height 100px;

}

We float the empty div to the left (or right) and give it a height of 50% of the parent div. That causes it to fill up the entire upper half of the parent element.

Because this div is floated it’s removed from the normal document flow so we need to clear the child element. Here I’ve used clear: both, but you just need to clear in the same direction you floated the empty floater div.

The top edge of the child div should now be immediately below the bottom edge of the floater div. We need to bring the child element up by an amount equal to half its height and to do so we set a negative margin-bottom on the floater div.

This method also works across browsers. The downside is that it requires an empty div and that you know the height of the child element.

How To Center Content Vertically Using CSS

Выравнивание текста с помощью CSS

Начнем с атрибутов стиля, управляющих выводом текста в блочных элементах. Начнем со свойства text-align, которое является фактически заменой атрибута align (используется для выравнивания содержимого html-элементов, например абзацев p).

Свойство стиля text-align задает горизонтальное выравнивание текста и имеет всего четыре возможных значения:

Доступные значения этого правила  определяют выравнивание, соответственно: left — по левому краю, right — по правому краю, center — по центру и justify — по ширине страницы (одновременно по левому и правому краю за счет увеличения расстояния между словами). Для примера, текст этой статьи выравнен по ширине страницы (если вы заметили у него ровные границы и слева и справа) с помощью правила text-align:justify.

По умолчанию, горизонтальное выравнивание выполняется по левому краю, поэтому специально указывать text-align:left не обязательно, если в родительских элементах не было указано другого выравнивания.

 Примеры использования свойства:

Следующее свойство CSS text-ident задает отступ для красной строки, например для текста в теге абзаца p. Это правило также, как и text-align, применимо только для блочных элементов. Синтаксис:

Здесь допускаются абсолютные и относительные величины отступа. Абсолютные значения (px — пикселы, em, ex и др.) можно указывать как со знаком плюс, так и со знаком минус. Относительная величина обычно задается в процентах (%). Относительное значение рассчитывается от ширины области, которая отведена под текст. Так, css правило text-indent:50% задаст красную строку равную половине длины этой самой строки. По умолчанию отступ «красной строки» равен нулю. Пример:

Далее рассмотрим вертикальное выравнивание — свойство vertical-align. Это свойство применимо уже для всех html элементов и практически для всех означает выравнивание между собой строчных элементов с текстом относительно их базовой линии. Кроме тегов таблицы td и th, в которых по вертикали будет выравниваться весь контент. Синтаксис:

Рассмотрим каждое значение подробнее:

• baseline — выравнивание фрагмента текста по базовой линии родительского элемента. Это значение по умолчанию;
• sub — фрагмент текста изображается в виде нижнего индекса или подстрочным для родительского элемента;
• super — фрагмент текста изображается в виде верхнего индекса или надстрочным для родительского элемента;
• top — выравнивание фрагмента текста по верхнему краю родительского элемента;
• text-top — выравнивание фрагмента по верхнему краю текста родительского элемента;
• middle — выравнивание центра фрагмента текста по центру родительского элемента;
• bottom — выравнивание фрагмента текста по нижнему краю родительского элемента;
• text-bottom — выравнивание фрагмента по нижнему краю текста родительского элемента;

На рисунке ниже можно посмотреть поведение фрагментов теста при различных значениях свойства vertical-align в браузере Internet Explorer 11:

 Кроме вышеперечисленных значений, можно указывать числовые значения. Так, правило CSS vertical-align:0 будет означать тоже самое, что  и  запись vertical-align:baseline. А правило vertical-align:10px будет смещать текст вверх на 10 пикселей относительно базовой линии. Для смещения текста вниз значение необходимо указывать с минусом.

Сдвиг также можно задавать в относительных единицах измерения, например в em и в ex или в процентах.

Для вертикального выравнивания содержимого ячеек таблицы в vertical-align следует использовать значения:

• top — для выравнивания содержимого по верхней границе ячейки;
• bottom — для выравнивания содержимого по нижней границе ячейки;
• middle — для выравнивания по центру ячейки (используется по умолчанию).

Для достижения нужного результата, обычно приходится экспериментировать с различными значениями свойства стиля vertical-align. Многочисленные возможные значения дают слишком разный результат в различных случаях.

Выравнивание вдоль поперечной оси

Время перейти на следующий уровень. Вы можете использовать три свойства CSS для выравнивания элементов вдоль поперечной оси. Два из них ( и ) предназначены для однострочного выравнивания, а  для выравнивания по многострочной линии.

Однострочное выравнивание

Элементы и определяют, как пространство распределяется между элементами flex вдоль поперечной оси. На самом деле, оба делают то же самое, но в то время как  выравнивают все элементы внутри flex контейнера, переопределяет выравнивание по умолчанию для отдельных flex элементов.

Оба могут принимать следующие значения:

1. — заставляет свойство align-self наследовать значение align-items (по умолчанию для align-self)
2. — flex элементы выровнены от начала поперечной оси
3. — flex элементы выровнены от конца поперечной оси
4. — flex элементы выровнены по центру поперечной оси
5. — flex элементы выровнены от их вверх
6.   — flex элементы растянуты вдоль поперечной оси так, чтобы заполнить flex контейнер (по умолчанию для align-items)

Codepen ниже показывает, как свойства и ведут себя когда, flex-direction установлено как . Поперечная ось по умолчанию проходит сверху вниз. Элементы имеют разные внутренние отступы (padding), чтобы изменить их высоты и базовые линии. Например, вы можете увидеть, что значение выравнивает элементы от начала поперечной оси, тогда как выравнивает их от конца.

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

Многострочное выравнивание

Свойство делает возможным многострочное выравнивание вдоль поперечной оси. Оно определяет, как строки flex элементов отступают друг от друга. Свойство align-content не влияет на контейнер с одной строкой flex (например, когда содержимое не переносится). Оно может принимать шесть различных значений:

1. — flex элементы выровнены от начала поперечной линии
2. — flex элементы выровнены от конца поперечной оси
3. — flex элементы выровнены по центру поперечной оси
4. — flex элементы распределены равномерно вдоль поперечной оси между flex-start и flex-end
5. — flex элементы распределены равномерно вдоль поперечной оси, но отступы половинного размера добавляются с каждого конца
6. — flex элементы растянуты вдоль поперечной оси так, чтобы заполнить flex контейнер (это значение по умолчанию)

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

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

Если вы поняли все, что мы до этого прошли, то вы очень хорошо потрудились. Теперь у вас есть хорошее базовое понимание flexbox выравнивания.

Additional Resources

In the sections above I linked to articles specific to each method. Below are some resources that cover more than a single method for centering.

• Vertical Centering With CSS — covers all the methods above except for the padding method
• Two Simple Ways to Vertically Align with CSS — Covers absolute positioning and negative margins and the line height methods
• Vertical centering using CSS — Covers all methods except the floater div method and adds a few more.
• CSS tests and experiments — Contains a variety of css experiments. Search the page for the word vertical and you’ll find several vertical centering experiments, including the 2 links below.
• Centering (horizontally and vertically) an image in a box
• Shrink-wrap and Center

IE6-7: метод expression

Т.к. предыдущий способ не работает в IE6-7, то надо исправить эту неприятность.

Expression — короткие куски JS кода, которые помещаются в файл стилей, выполняются один раз и работают только в IE. Expression невалидны. Добавляем к предыдущему примеру в файлы стилей для IE6 и 7 такой кусок кода:

.wrapper p {
   z-index:  expression(
      runtimeStyle.zIndex  = 1,
      this ==  ((200/2)-parseInt(offsetHeight)/2) < 0
      ?  style.marginTop="0" :  style.marginTop=(200/2)-(parseInt(offsetHeight)/2) +'px'
   );
}

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

6 ответов

Изменить . Пожалуйста, используйте ответ Michael_B вместо моего. Я бы удалил этот ответ, если бы мог, но принятые ответы не могут быть удалены.

Если вы сделаете вертикальным (используя ) затем центрируется вертикально. Тогда вы можете просто использовать для центрирования по горизонтали.

Вот оно в действии: http://codepen.io/anon/pen/Fkhgo

Вместо использования используйте

Нет необходимости изменять или использовать (как указано в другом ответе ).

Вот ваш код с одной настройкой, чтобы все это работало:

применяется к элементам flex . За исключением того, что ваш не является гибким элементом, поскольку его родитель — — не имеет или применено.

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

аналогично свойству , за исключением того, что применяется к flex контейнеры .

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

Технически, вот как и работа …

Свойство (в контейнере) устанавливает значение по умолчанию (по пунктам). Поэтому означает, что для всех элементов flex будет установлено значение .

Но вы можете изменить это значение по умолчанию, настроив для отдельных элементов.

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

Как текст является гибким элементом?

Некоторым людям может быть интересно, как прогон текста …

является дочерним элементом .

Причина в том, что текст, который явно не заключен в элемент встроенного уровня, алгоритмически оборачивается встроенным блоком. Это делает его анонимным встроенным элементом и потомком родителя.

Из спецификации CSS:

Спецификация flexbox предусматривает аналогичное поведение.

Следовательно, текст в является гибким элементом.

Для будущих пользователей Google,

Ответ, получивший наибольшее количество голосов, и второй по значимости, также предназначен для решения этой конкретной проблемы , опубликованной OP, где контент (текст) был «алгоритмически союзником», заключенным во встроенный элемент блока , НО, в вашем случае может быть центрирование нормального элемента по вертикали внутри контейнера , что также применимо в моем случае, так что для этого все, что вам нужно, это

Просто выкладываю это здесь, так как это лучший результат для вышеупомянутого запроса, а также я был довольно смущен в течение некоторого времени * Derp *

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

Вы можете изменить и отображается в и . Тогда будет работать для вас:

Давайте приступим к делу!

Вы хотите осуществить CSS выравнивание по центру по вертикали? Сначала создайте элемент с относительной позицией и размерами. Например: 100% по ширине и высоте.

Второй шаг может быть различным в зависимости от целевых браузеров, но можно использовать один из двух вариантов:

Старое свойство: нужно знать точный размер окна, чтобы удалить половину ширины и половину высоты. Посмотрите приведенный ниже пример.

Новое свойство CSS3: можно добавить свойство transform со значением translate 50% и блок всегда будет в центре. Посмотрите приведенный ниже пример.

В принципе, если вы хотите центрировать контент, никогда не используйте top: 40% или left: 300px. Это прекрасно работает на тестовых экранах, но это не центровка.

Помните position: fixed? Можно сделать с ним то же самое, что и с абсолютной позицией, но вам не нужна относительная позиция для родительского элемента — она всегда будет позиционировать относительно окна браузера.

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

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

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

В данном примере выравнивание по горизонтали устанавливается с помощью параметра align=»center» тега

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

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

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

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

За счет сочетания атрибутов align (горизонтальное выравнивание) и valign (вертикальное выравнивание) тега

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

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

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

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

Для указания выравнивания содержимого ячеек по верхнему краю, для тега

требуется установить атрибут valign со значением top (пример 2).

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

В данном примере характеристики ячеек управляются с помощью параметров тега

display: table-cell

Для вертикального выравнивания применяется свойство display: table-cell родительскому блоку, которое заставляет элемент эмулировать ячейку таблицы. Ему же задается высота и vertical-align: middle:

<!DOCTYPE html>
<html>
<head>
<title>Вертикальное выравнивание. Способ display: table-cell</title>
<style>
.wrapper {
   display:  table-cell;
   height:  100px;
   vertical-align:  middle;
}
</style>
</head>
<body>
   <div class="wrapper">
      Вертикально выравненная строка
   </div>
</body>
</html> 

Плюсы:

• Простота;
• Выравнивает как одну, так и несколько строк.

Минусы:

• Не работает в IE7 и ниже;
• Без дополнительных конструкций сложно манипулировать горизонтальным положением внешнего блока;
• Не всем нравится сам факт использования display: table-cell.