Программирование на Python и Objective-C в Mac OS

Программирование на Python и Objective-C под Mac OS и для iPhone / iPod Touch

Выравнивание текста в блоке по вертикали css: Все способы вертикального выравнивания в CSS / Хабр

Содержание

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


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

Задача верстки, которая очень часто встречается – это выравнивание текста по вертикали в блоке div.

Если с выравниванием текста по горизонтали, проблем обычно не возникает (используем свойство text-align:center и все будет хорошо), то с выравниванием по вертикали все немного сложнее.

Есть одной свойство в CSS, которое называется vertical-align. Казалось бы, используя его можно решить все проблемы. Но не тут-то было.

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

Для блочных элементов свойство vertical-align не работает.

Есть два способа, как можно выйти из этой ситуации:

Для тех, кто предпочитает все смотреть в видео:

Для тех, кто любит текст, читайте ниже способ решения этой проблемы.

Способ А. Как одно из решений, можно разместить текст не в элементе div, а в ячейке таблицы.

Способ Б. Использовать своство display:table-cell;

Одна проблема, это свойство не поддерживают Internet Explorer 6-7 версии.

Ситуация 1. Выравнивание одной строки текста.

Рассмотрим простой пример.

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

Этот способ хорошо работает, когда у вас всего одна строка с текстом.

Ситуация 2. Если известны точные значения ширины и высоты дочернего блока, где располагается сам текст.

Этот вариант решения предусматривает использование свойства position:absolute для дочернего блока, абсолютного его позиционирования относительно родительского блока с position:relative.

Зная ширину и высоту блока, можно взять половину этой величины и задать ее отрицательными значениями для свойств margin-left и margin-top.

Есть еще более современное решение этой проблемы — использование flexbox.

Если не нужна поддержка старых браузеров, этот вариант будет самым оптимальным.

Как видите, такая простая задача, как выравнивание текста по центру, оказалась не такой простой на практике.

Свойство CSS vertical-align

Свойство CSS vertical-align отвечает за вертикальное выравнивание текста, картинок на странице. Важной особенностью является то, что он работает только с элементами таблицы, inline и inline-block элементами. Поддерживается всеми современными браузерами.

Синтаксис CSS vertical-align

Где value может принимать следующие значения:

  • baseline — выравнивание по базовой линии предка (или просто нижняя граница родителя)
  • bottom — выравнивание по нижней части строки (или элемента, который располагается ниже всех)
  • middle — выравнивание средней точки элемента по базовой линии родителя плюс половина высоты родительского элемента
  • sub — отображение происходит под строкой (выглядит как подстрочный индекс)
  • super — отображение происходит над строкой (как верхний индекс)
  • text-bottom — выравнивание нижней границы элемента по нижнему краю строки
  • text-top — выравнивание верхняя границы элемента по верхнему краю строки
  • top — выравнивание верхняя края элемента по верху самого высокого элемента строки
  • inherit — наследует значение родителя
  • значение — указывается в пикселях. Положительное число смещает вверх относительно базовой линии. Отрицательное вниз
  • проценты — указывается в процетах. Положительное число смещает вверх относительно базовой линии. Отрицательное вниз

Значение vertical-align по умолчанию:

  • baseline (для строчных элементов)
  • middle (для ячеек таблицы)

Вертикальное выравнивание в таблицах

Чаще всего vertical-align используется в ячейках таблиц. В теге <table> используют атрибут valign .

Синтаксис CSS valign для таблиц

Где value может принимать следующие значения:

  • baseline — выравнивание по базовой линии первой текстовой строки
  • bottom — выравнивание по нижнему краю ячейки таблицы
  • middle — выравнивание по середине ячейки
  • top — выравнивание верхнему краю ячейки

Преобразуется на странице в следующее:

Выравнивание по верху
Выравнивание по середине
Выравнивание по низу

Примеры с вертикальными выравниваниями

Пример 1. Значения vertical-align: baseline, bottom, top, sub
Пример 2. Значения vertical-align: абсолютные значения и проценты

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

Преобразуется на странице в следующее:

Исходная строка. Текст с выравниванием на 10 пикселей вверх
Исходная строка. Текст с выравниванием на 5 пикселей вниз
Исходная строка. Текст с выравниванием на 50% вверх
Исходная строка. Текст с выравниванием на 30% вниз

Значение vertical-align: middle не выравнивает строчный элемент по центру самого большого элемента в строке (что можно было бы ожидать). Вместо этого значение middle выравнивает элемент относительно гипотетичной строчной буквы «X» (также называемой x-высотой).

Для обращения к vertical-align из JavaScript нужно писать следующую конструкцию:

Выравнивание по вертикали CSS

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

Свойство vertical-align

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

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

Второе значение – sub. Его ориентир – нижняя базовая линия родительского элемента. Например, так.

Противоположное sub выравнивание super. Ориентиром служит верхняя базовая линия родительского элемента.

Оба эти значения в таблицах аналогичны baseline.
Совершенно другая ситуация с выравниванием middle. Это значение css позволяет выровнять текст по центру. Здесь ориентиром служит середина родительского элемента. Вычисляется она очень просто: берется его размер по вертикали и делится пополам. Через центр проводится линия, по которой и выравнивается элемент.
В случае с таблицами элемент выравнивается по середине ячейки без границ.

Еще одна пара значений – top-bottom. Они выравнивают элемент по верхней и нижней линии строки соответственно. Ну или ячейки, если речь идет о таблице.
Также можно указывать размещение элемента по горизонтали в процентах или непосредственном значении в единицах, поддерживаемых CSS (пикселях, сантиментрах, em и так далее). В этом случае браузер ориентируется на базовую линию родительского элемента. В таблицах код себя ведет так же, как если верстальщик укажет baseline в качестве значения.

Возможные проблемы

Предположим, мы хотим нарисовать с помощью HTML и CSS такой рисунок.

С точки зрения HTML необходимо создать два div элемента. Присвоим внешнему родительскому элементу класс outer, а внутреннему – inner. В качестве примера приведем ситуацию, когда мы знаем заранее размеры каждого блока.
Необходимо прописать такой css-код.

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

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

Использование таблицы для выравнивания текста по вертикали в CSS

В отличие от инлайн-блоков, выравнивание ячейки таблицы позволяет переместить и ее содержимое. Сделать это можно просто средствами HTML.

Недостатков у такого подхода два:

  1. Неправильно с позиции семантики применять таблицы для этой цели.
  2. Необходимо создать лишний элемент.

Исправить первый недостаток можно, изменив теги table и td на div и использовать режим отображения «table» и «table-cell» соответственно.

Но вот второй недостаток все равно останется. Код будет немного тяжеловат, особенно если таких элементов много.

Отступы

Можно выровнять внутренний див по центру с помощью вертикальных отступов. Недостаток метода – необходимо точно знать высоту обоих блоков. Величина отступа вычисляется по формуле (высота внешнего блока – высота внутреннего блока)/2. Пример кода.

Line-height

С помощью этого свойства также можно выравнивать элементы по вертикали. Важно, чтобы в инлайн-блоке было не больше одной строчки текста. Это основной недостаток метода. Если эти правила соблюдены, необходимо приравнять line-height к высоте внешнего дива.
Поскольку нельзя допускать, чтобы образовывалось больше одной строчки, рекомендуется добавить к коду правила white-space: nowrap и overflow: hidden.
Код будет выглядеть следующим образом.

Еще один недостаток этого способа исправить проблему – необходимость знать высоту внешнего блока.

Растягивание

Этот метод можно использовать, если известна высота только внутреннего блока. Сначала необходимо выставить абсолютное позиционирование для него, а для внешнего – относительное. Для внутреннего блока также устанавливаются правила top: 0 и bottom: 0, чтобы расширить его по всей высоте внешнего блока.
После этого выставляется значение вертикальных отступов внутреннего блока на auto. Код выглядит следующим образом.

Отрицательный margin-top

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

  1. Внутренний блок опускается вниз на половину высоту внешнего.
  2. После этого он поднимается вверх на половину своей высоты.

Технически метод реализуется следующим образом.

Свойство transform

В отличие от предыдущего метода, здесь не требуется знать высоту внутреннего блока. Во всем остальном способ такой же самый, просто вместо margin-top: -50px пишется transform: translateY(-50%).
Возникает вопрос: почему в прошлом способе нельзя было сдвинуть объект вверх на определенное количество процентов. Причина кроется в том, что margin-top высчитывает процент от родителя, в то время как transform позволяет сдвинуть объект на определенный процент от своей высоты.
Недостаток метода в плохой поддержке старых версий браузеров.

Выравнивание с помощью Flexbox

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

Этот способ идеален, если основная аудитория сайта пользуется современными браузерами.

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

Автор: Администратор


Просмотров: 3385

Теги:
css,
vertical,
align

В этой статье мы расскажем о том, как выровнять текст, div, картинку и так далее по вертикали, используя CSS.

Довольно часто люди сталкиваются с проблемой, что им необходимо текст или изображение выровнять по вертикали.

Если речь и идет о ячейках таблицы то там всё сводится к написанию свойства vertical-align, с необходимым значением.

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

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

Пример

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
	<title>Страница</title>
	<link rel="stylesheet" href="/../css/template.css" type="text/css" />
</head>
<body>
	<div>
		<div>Какой то текст в другом блоке(div)</div>
	</div>
	<div>
		<img src="/images/smile.png" alt="smile" /><br>текст и картинка перед ним
	</div>
	<div>
		обычный текст
	</div>
</body>
</html>
div.one {
	vertical-align:middle;
	display:table-cell;
	/* доп свойства */
	height:400px;
	width:200px;
	background:#00FF66;
	text-align:center;
}

	div.one div {
		background:#CC6600;
	}

Результат вы сможете увидеть на демо-странице: 

css — CSS: вертикальное выравнивание встроенного блочного элемента в строке текста

У меня есть элемент встроенного блока, помещенный внутри строки текста:

В элементе .icon есть vertical-align: middle;, в результате получается вот такое изображение:

Как видите, значок не выровнен по середине текста, он немного ниже, при этом выравнивание текста выглядит нормально. .button-content имеет line-height, равное высоте родителя. Я попытался обернуть текстовые элементы вокруг значка:

И получил этот результат:

Монета немного поднялась относительно текста, тогда как вся строка опустилась на пиксель-два вниз.

Как правильно выровнять элемент встроенного блока внутри строки текста? А что это за фрагменты текста и как они себя ведут? У них есть display:inline; или что-то в этом роде, потому что я не вижу их свойств в DevTools?

1

Cubius

17 Ноя 2016 в 16:14

4 ответа

Лучший ответ

Вертикальное выравнивание работает не так, как вы думаете. Он используется в таблицах HTML, но не работает в div. Некоторое время это было болью. К счастью, в настоящее время этого легко добиться с помощью flexbox.

Для этого оберните два бита копии в отдельные элементы span, чтобы ваша структура выглядела так:

<div>
    <span>buy for</span>
    <div></div>
    <span>1000</span>
</div>

Тогда ваш css должен выглядеть так:

.button-content{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 130px;
}

Или, если вы не можете поддерживать flexbox, ваш .button-content может быть установлен на display: table-cell;, и vertical-align: middle; должен работать.

Я настоятельно рекомендую flexbox.

2

elmarko
17 Ноя 2016 в 13:34

Если элементы span не стилизованы, результат будет одинаковым с ними или без них.

С vertical-align: middle; position: relative; top: -1px; вы можете получить хорошие результаты.

.icon {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: blue
}
.top {
  vertical-align: top;
}
.bottom {
  vertical-align: bottom;
}
.middle {
  vertical-align: middle;
}
.moveup {
  position: relative;
  top: -1px;
}
<div>
  <span>Buy for</span>
  <div></div>
  <span>1000</span>
</div>

<div>
  Buy for
  <div></div>
  1000
</div>

<hr>

<div>
  Buy for
  <div></div>
  1000 vertical-align: top;
</div>

<div>
  Buy for
  <div></div>
  1000 vertical-align: bottom;
</div>

<div>
  Buy for
  <div></div>
  1000 vertical-align: middle;
</div>

<hr>

<div>
  Buy for
  <div></div>
  1000 vertical-align: middle; top: -1px;
</div>

1

rafaelcastrocouto
17 Ноя 2016 в 13:34

Простой ответ

Я еще не видел простого ответа, поэтому просто отправлю свой:

.icon_tpye-gold {
  vertical-align: -5px; /* << or another value to center the inline element vertically */
}

Предложение: согласовываться с именами классов (чтобы icon_type-gold было понятнее, когда названо icon_type_gold или icon-type-gold, это выглядит менее небрежно)

1

Derk Jan Speelman
17 Ноя 2016 в 13:54

Значок на самом деле выровнен по вертикали, но относится к полной высоте строки, включая пространство под базовой линией, зарезервированное для нижних элементов символов, таких как y, g, p и т. Д. (также y в тексте вашей кнопки) Вы можете попробовать добавить position: relative; и bottom: 3px; (попробуйте разные значения) к этому встроенному блоку, чтобы переместить его вверх.

1

Johannes
17 Ноя 2016 в 14:20

Как центрировать текст по вертикали с помощью CSS?

В этой статье мы узнаем, как выровнять текст по вертикали с помощью CSS, и увидим его реализацию на примере. Хотя CSS2 не поддерживает вертикальное выравнивание. Но мы можем выровнять центральные блоки по вертикали, объединив несколько свойств. Уловка состоит в том, чтобы указать, что внешний блок должен быть отформатирован как ячейка таблицы, потому что содержимое ячейки таблицы может быть центрировано по вертикали. Мы будем использовать свойство vertical-align, которое определяет вертикальное выравнивание табличного поля или встроенного элемента.

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

 DIV.container {
    мин-высота: 10em;
    дисплей: таблица-ячейка;
    вертикальное выравнивание: средний}
...
DIV {
  Гики
} 

Пример: В этом примере описывается использование свойства vertical-align вместе со свойством display в качестве ячейки таблицы.

HTML

< html >

< голова >

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

< style >

div {

height: 200px;

ширина: 400 пикселей;

граница: 2px пунктирная # 4b2869;

}

.контейнер {

min-height: 10em;

дисплей: таблица-ячейка;

выравнивание по вертикали: по центру;

}

стиль >

головка >

< корпус >

< div class = «контейнер» > GeeksforGeeks div >

body >

html >

Вывод:

Существует более универсальный подход, который определяет другой способ выравнивания текста по вертикали.Это решение будет работать для одной строки и нескольких строк текста, но по-прежнему требует контейнера фиксированной высоты.

 div {
  высота: 200 пикселей;
  высота строки: 200 пикселей;
  выравнивание текста: центр;
  граница: 2px пунктирная # f69c55;
}
охватывать {
  дисплей: встроенный блок;
  вертикальное выравнивание: по центру;
  высота строки: нормальный;
} 

CSS просто определяет размер div, выравнивает по вертикали по центру диапазон, устанавливая высоту строки элемента div, равную его высоте, и делает диапазон встроенным блоком с vertical-align: middle.Затем он устанавливает нормальную высоту строки для диапазона, поэтому его содержимое естественным образом перетекает внутрь блока.

Пример: В этом примере описывается выравнивание содержимого по вертикали с фиксированной высотой контейнера.

HTML

< html >

< голова >

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

< style >

div {

height: 200px;

высота строки: 200 пикселей;

выравнивание текста: по центру;

граница: 2px пунктирная # f69c55;

}

диапазон {

дисплей: встроенный блок;

выравнивание по вертикали: по центру;

line-height: normal;

}

стиль >

головка >

< корпус >

< дел >

< диапазон > GeeksforGeeks диапазон >

дел >

<

/ корпус >

html >

Вывод:

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

Выровнять текст по вертикали в CSS

  1. Используйте свойство line-height для выравнивания текста по вертикали в CSS
  2. Используйте диапазон внутри div По высоте строки Свойство для выравнивания текста по вертикали в CSS
  3. Используйте flexbox для вертикального выравнивания текста в CSS

Мы представим три метода вертикального выравнивания текста в CSS.

Используйте свойство

line-height для вертикального выравнивания текста в CSS

Если у нас есть однострочный текст, мы можем использовать свойство line-height для выравнивания текста по вертикали в пределах div . Свойство line-height CSS устанавливает высоту строки. Он используется для установки расстояния между строками текста. Однако мы также можем использовать его для выравнивания нашего однострочного текста по вертикали. Этот метод не сработает, если текст имеет разрывы строк или состоит более чем из одной строки.Мы можем присвоить line-height любое значение в соответствии с нашими требованиями относительно того, где мы хотим выровнять текст по вертикали.

Например, создайте div и напишите внутри него однострочный текст. Давайте дадим div имя класса center . Напишите однострочный текст Выровненный по вертикали внутри div . Присвойте div высоту , , , 100 пикселей, и высоту строки , , , 100 пикселей, , чтобы вертикально выровнять текст по центру div.Наконец, дайте div границу из 1px сплошной черный цвет , чтобы увидеть вертикальное выравнивание.

В приведенном ниже примере показано, что текст выровнен вертикально по центру div , содержащего по высоте из 100 пикселей и границу из 1 пиксель сплошной черный с использованием свойства CSS line-height .

Пример кода:

  
Выровнен по вертикали
 .center {
высота: 100 пикселей;
высота строки: 100 пикселей;
граница: сплошной черный 1px;
}
  

Использовать диапазон

Внутри div Наряду со свойством line-height для выравнивания текста по вертикали в CSS

Мы также можем выровнять несколько строк по вертикали, используя свойство line-height . Мы можем разместить тег span внутри тега div и поместить несколько строк внутри тега span . Мы можем использовать тег br , чтобы разбить строку и сделать ее многострочным текстом.Затем мы можем использовать свойство line-height для div и span . Мы также будем использовать свойство CSS display: inline-block для тега span , чтобы объединить несколько строк кода вместе. Поэтому мы также должны использовать свойство CSS line-height внутри span для отделения многострочного текста друг от друга.

Например, создайте div , а затем span внутри div .Напишите несколько строк текста внутри этого span с помощью тега br . В CSS выберите div и задайте высоту 100px и установите line-height на 100px . Установите границу div 1px сплошной черный , чтобы увидеть выравнивание. Установите для свойства display тега span значение inline-block , чтобы объединить несколько строк текста вместе. Задайте высоту строки от до от 20 пикселей до диапазона , чтобы образовался промежуток между несколькими строками текста.Удерживайте с выравниванием по вертикали с по по центру , чтобы текст размещался вертикально точно посередине.

В приведенном ниже примере показано вертикальное выравнивание нескольких строк текста в блоке div с помощью свойства line-height и display: inline-block .

Пример кода:

  
Многострочный

код
  div {
 высота: 100 пикселей;
 высота строки: 100 пикселей;
 граница: сплошной черный 1px
}
охватывать {
 дисплей: встроенный блок;
 вертикальное выравнивание: по центру;
 высота строки: 20 пикселей;
}
  

Используйте

flexbox для выравнивания текста по вертикали в CSS

Мы также можем использовать flexbox для выравнивания текста в пределах div по вертикали или горизонтали.Мы можем использовать flexbox , установив для свойства display значение flex . После установки свойства display на flex , мы можем использовать свойство align-items и поместить его значение как center для выравнивания текста по вертикали в пределах div . Мы можем использовать свойство justify-content и установить для него значение center , чтобы центрировать текст в пределах div по горизонтали. Флексбоксы очень просты в использовании и к тому же очень эффективны.

Например, создайте div и напишите внутри него одну или несколько строк текста. Используйте тег br , чтобы сделать несколько строк текста. Задайте высоту 100px для блока div . Установите границу как 1 пиксель, сплошной черный цвет , чтобы увидеть выравнивание. Поместите значение свойства display как flex , чтобы использовать flexbox . Затем установите align-items на center , чтобы выровнять текст по вертикали в пределах div по центру.Мы также можем выровнять текст по горизонтали, поместив значение justify-content в центр .

Таким образом, мы можем использовать flexbox для выравнивания текста по горизонтали и вертикали в CSS.

Пример кода:

  
Выровнять
текст по
центру
  div {
 высота: 100 пикселей;
 граница: сплошной черный 1px;
 дисплей: гибкий;
 align-items: center;
 justify-content: center;
}
  

Внести вклад

DelftStack - это коллективный проект, созданный такими компьютерными фанатами, как вы.Если вам понравилась статья и вы хотите внести свой вклад в DelftStack, написав платные статьи, вы можете проверить страницу напишите для нас.

  • Центрировать текст по вертикали в CSS
  • Выравнивание в CSS: текст и вертикальное выравнивание

    Фотография на обложке: Alex Wong.

    Это начало долгого пути, чтобы узнать, как добиться, чтобы вещи, наконец, окончательно выровнялись на наших веб-страницах.

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

    Назначение выравнивания текста - выравнивание текста по горизонтали . Поиграйте с этим:

    Если вы раньше работали с каким-либо текстовым редактором, эти параметры будут вам хорошо знакомы.

    В ближайшее время появятся и другие параметры - например, начало и конец , которые зависят от направления текста, выравнивание с помощью определенного символа (например, десятичного числа), и justify-all , которое заставляет последнюю строку текста для выравнивания.На дату создания (август 2019 г.) они сильно различаются по поддержке, так как в настоящее время они все еще являются черновиками редакции с точки зрения спецификации - поэтому обязательно проверьте таблицы совместимости, прежде чем использовать что-либо необычное.

    Ссылки и дополнительная литература для выравнивания текста:

    Как вы могли догадаться по названию, цель vertical-align - выровнять текст по вертикали . В приведенном ниже примере я выделил несколько ключевых фраз, связанных с растениями; кнопки переключают свойство вертикального выравнивания этих выделений.

    Если вы применяете вертикальное выравнивание к элементам display: inline или display: inline-block , то вы сможете выровнять их друг с другом. Вы можете выровнять все, что может течь по горизонтали, если для него задано допустимое свойство отображения. Текст, изображения, значки, кнопки, входы ...

    При использовании

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

    Вертикальное выравнивание также работает с таблицами (а также с элементами с отображением, установленным в table-cell). Вот примерная таблица, с которой можно поиграть:

    Важное примечание:

    ⚠️ Выравнивание по вертикали не выравнивает элементы блока. ⚠️

    Итак, если вы думаете ... «подождите, у меня не сработало вертикальное выравнивание! Почему вы врете?», Посмотрите на свойство display вашего элемента. Vertical-align - это не универсальный способ выровнять все. Поскольку элементы уровня блока не могут иметь родственника в потоке на той же строке, что и они, они не будут выровнены.Однако у блочных элементов могут быть дочерние элементы, унаследовавшие их свойство vertical-align; это не совсем недействительно, просто бесполезно для позиционирования.

    Если вы помните времена табличной компоновки (кстати, waaaay назад ... надеюсь), вы можете вспомнить атрибут valign в ячейках таблицы. Предполагается, что свойство vertical-align было создано специально для имитации поведения этого атрибута.

    tl; dr

    Используйте это для вертикального выравнивания текста, изображений, значков или других объектов, которые отображаются «на одной линии» друг с другом по горизонтали.Если вы не используете его в таблице, вертикальное выравнивание изменяет поведение элементов относительно друг друга , а не по отношению к их родительскому элементу.

    Ссылки и дополнительная литература для вертикального выравнивания:

    Бонус по вертикали: высокое привидение 👻

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

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

    У нас:

    • Внешний контейнер больше внутреннего
    • Внутренний контейнер, который мы хотим центрировать по вертикали
    • Невидимый контейнер "высокого призрака", который только помогает при выравнивании

    Важные биты:

    • Высокий призрак и внутренний контейнер - , оба display: inline-block and vertical-align: middle
    • Рост призрака - 100% (вот почему он высокий!)
    • Высокое привидение имеет нулевую ширину, чтобы убедиться, что он не нарушает выравнивание (он невидим)

    Невидимый выравнивающий элемент установлен как как высота его родительского элемента с высотой : 100% , поэтому все, что выровнено по вертикали с «высоким призраком», произойдет для выравнивания с элементом родительского блока.Два элемента внутри контейнера являются строчно-блочными, поэтому они доступны для вертикального выравнивания друг с другом. Для них обоих установлено значение vertical-align: middle . Итак, внутренний контейнер, который мы хотим выровнять (кот), находится посередине.

    Теперь этот код немного запутан, поэтому мы можем очистить его, используя псевдоэлементы:

    Есть еще пара небольших заметок:

    • Атрибут содержимого , содержащий пробел, нужен только для того, чтобы убедиться, что элемент может отображаться во всех браузерах.
    • Хотя в этом примере ширина и высота заданы явно, это необязательно; пока внутреннее содержимое не выходит за пределы родительского, этот трюк будет работать, поскольку он основан на процентах.
    • Кот расположен по центру по горизонтали с text-align: center , потому что я думаю, что это выглядит хорошо. Это необязательно.

    Что-нибудь еще вы хотели бы знать об этих свойствах? Есть запросы на следующую запись в серии? У меня запланировано лота ... Оказывается, в CSS есть много способов выровнять материал. (Почему ни один из них никогда не работал? 🤔)

    Все, что вам нужно знать (CSS)

       

    Нам нужно говорить об этом!

    Ага, давайте поговорим о свойстве CSS vertical-align . Предполагаемое использование - выравнивание текста и элементов рядом друг с другом. Например, центрирование значка рядом с фрагментом текста.

    Но иногда он может быть настоящим отморозком со всеми его, казалось бы, загадочными правилами.Например, может случиться так, что элемент, для которого вы изменили vertical-align , вообще не меняет своего выравнивания, в отличие от других элементов рядом с ним! Какая радость!

    Итак, чтобы свести к минимуму проблемы в будущем, я пробрался через спецификации CSS W3C, чтобы прояснить поведение vertical-align раз и навсегда .

    Давайте разберемся с правилами игры!

    О чем вы узнаете из этой статьи:

    1. Действия по вертикальному выравниванию на встроенных элементах в строковом блоке.⬀
    2. Встроенные элементы и линейные блоки имеют базовые, верхние и нижние линии. ⬀
    3. Вертикальное выравнивание: выравнивание базовых линий, вершин и низов. ⬀
    4. Пример: как центрировать значок рядом с фрагментом текста. ⬀
    5. Пример: Как может двигаться базовая линия. ⬀
    6. Пример: Как центрировать элементы по вертикали без зазора внизу. ⬀
    7. Пример: Как убрать зазор между двумя выровненными элементами.⬀

    Действия по вертикальному выравниванию для элементов встроенного уровня в строковом блоке

    vertical-align используется для выравнивания элементов inline-level. Это элементы, у которых свойство display оценивается как

    .

    • рядный,
    • встроенный блок или
    • inline-table (в этой статье не рассматривается).

    Встроенные элементы - это, по сути, теги, обертывающие текст.

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

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

       

    Вообще в строке текста.
    A короткий в строке текста.
    Этот может случаться.

    Линейные прямоугольники очерчивают поле, на котором мы играем. Внутри этих рамок свойство vertical-align отвечает за выравнивание отдельных элементов. Итак, в отношении чего выравниваются элементы?

    О базовых линиях, вершинах и низах

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

    Встроенный элемент

      
     

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

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

    Базовая линия встроенного элемента - это строка, символы расположены на . Это синяя линия на рисунке. Грубо говоря, базовая линия где-то ниже середины высоты шрифта . Взгляните на спецификации W3C для подробного определения.

    Элемент встроенного блока

      
     

    Слева направо вы видите: элемент встроенного блока с содержимым в потоке («c»), элемент встроенного блока с содержимым потока и переполнение : скрыто и элемент встроенного блока с нет. текущего содержимого (но область содержимого имеет высоту).Границы поля обозначены красными линиями, граница - желтой, отступ - зеленым, а область содержимого - синим. Базовая линия каждого встроенного блочного элемента показана синей линией.

    Внешние края элемента Inline-block являются верхним и нижним краями его поля поля. Это красные линии на рисунке.

    Базовая линия элемента Inline-block зависит от того, имеет ли элемент входящее содержимое:

    • В случае содержимого в потоке базовая линия элемента inline-block является базовой линией последнего элемента содержимого в нормальном потоке (пример слева).Для этого последнего элемента его базовая линия находится в соответствии с его собственными правилами.
    • В случае содержимого в потоке, но свойство переполнения оценивается как нечто отличное от видимого , базовой линией является нижний край поля поля (пример посередине). Таким образом, это то же самое, что и нижний край элемента inline-block.
    • В случае нет содержимого в потоке базовой линией, опять же, является нижний край поля поля (пример справа).

    Line Box

         

    Икс Этот может случаться.

    Вы уже видели эту настройку выше. На этот раз я нарисовал верхнюю и нижнюю часть текстового поля линейного поля (зеленый, подробнее об этом ниже), а также базовую линию (синий). Я также выделил область текстовых элементов, придав им серый фон.

    Линейный блок имеет верхний край , выровненный с верхним краем самого верхнего элемента этой строки, и нижний край , выровненный с нижним краем самого нижнего элемента строки.Это поле обозначено красными линиями на рисунке выше.

    Базовая линия линейного блока является переменной:

    CSS 2.1 не определяет положение базовой линии линейного блока.

    - Спецификации W3C

    Это, наверное, самая запутанная часть при работе с vertical-align. Это означает, что базовая линия размещается там, где она должна быть для выполнения всех других условий, таких как выравнивание по вертикали и минимизация высоты линейного блока.Это свободный параметр в уравнении.

    Поскольку базовая линия линейного блока невидима, может не сразу быть очевидно, где она находится. Но вы можете очень легко сделать это видимым. Просто добавьте символ в начале строки в вопросах, как я добавил «x» на рисунке. Если этот символ никаким образом не выровнен, он по умолчанию будет располагаться на базовой линии.

    Около своей базовой линии линейное поле имеет то, что мы могли бы назвать его текстовым полем . Текстовое поле можно рассматривать просто как встроенный элемент внутри строчного поля без какого-либо выравнивания.Его высота равна font-size его родительского элемента. Таким образом, текстовое поле включает только неформатированный текст строчного поля. Поле обозначено зелеными линиями на рисунках выше. Поскольку это текстовое поле привязано к базовой линии, оно перемещается при перемещении базовой линии. (Боковое примечание: это текстовое поле называется стойкой в ​​спецификациях W3C)

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

    • Есть область, которая называется , строка .Это область, в которой происходит вертикальное выравнивание. Он имеет базовую линию , текстовое поле и верхний и нижний край .
    • Имеется встроенных элемента . Это объекты, которые выровнены. У них есть базовая линия и верхний и нижний край .

    Вертикальное выравнивание для выравнивания базовых, верхних и нижних линий

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

    Выравнивание относительно базовой линии линейного прямоугольника

        
             Икс
                исходный уровень
                 суб
                 супер
                 -50%
                 + 10 пикселей
            
        
     
    • базовая линия : базовая линия элемента находится точно над базовой линией линейного блока.
    • sub : базовая линия элемента смещена ниже базовой линии линейного блока.
    • super : базовая линия элемента смещена над базовой линией линейного блока.
    • <процент> : базовая линия элемента смещена относительно базовой линии линейного блока на процент относительно высоты строки.
    • : базовая линия элемента смещена относительно базовой линии линейного блока на абсолютную длину.

    Особый случай vertical-align: middle заслуживает отдельной цифры:

        
              Икс
                  середина
                
            
        
     
    • средний : средняя точка между верхним и нижним краями элемента выровнена по базовой линии линейного блока плюс половина x-высоты.

    Выравнивание относительно текстового поля линейного поля

        
                Икс
            
                  текст вверху
                
                  текст внизу
                
            
        
     

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

    • text-top : верхний край элемента выровнен по верхнему краю текстового поля строчного поля.
    • text-bottom : нижний край элемента выровнен по нижнему краю текстового поля строчного поля.

    Выравнивание относительно внешних краев линейной рамки

        
                Икс
            
                  верхняя
                
                  Нижний
                
            
        
     
    • верх : верхний край элемента выровнен по верхнему краю линейного блока.
    • нижний : нижний край элемента выровнен по нижнему краю линейного блока.

    Формальное определение, конечно же, можно найти в спецификациях W3C.

    Почему Vertical-Align ведет себя именно так?

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

    Центрирование значка

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

      
     
      
     
    По центру?
    
    
     
     По центру! 
    
      

    Вот снова пример, но я нарисовал некоторые вспомогательные линии, которые вы уже знаете сверху:

      
     

    Это проливает свет на нашу проблему.Поскольку текст слева совсем не выровнен, он находится на базовой линии. Дело в том, что выравнивая прямоугольник с vertical-align: middle , мы выравниваем его по середине строчных букв без восходящих элементов (половина x-высоты). Итак, вверху выделяются символы с восходящими элементами.

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

    Движение базовой линии линейного бокса

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

    Некоторые примеры:

    • Если в строке, охватывающей всю высоту, есть высокий элемент, vertical-align на него не влияет. Над его верхом и под его низом нет места, которое позволяло бы ему двигаться. Чтобы выполнить выравнивание относительно базовой линии линейного бокса, базовая линия линейного бокса должна переместиться. Короткое поле имеет выравнивание по вертикали: базовая линия . Слева высокое поле выровнено по по нижнему тексту .Справа он выровнен по верхнему краю текста . Вы можете увидеть, как базовая линия подпрыгивает, забирая с собой короткую коробку.

            
           
        
       
       
      
      
       
       
      
        

      Такое же поведение проявляется при выравнивании высокого элемента с другими значениями для vertical-align .

    • Равномерная установка вертикальное выравнивание от до снизу (слева) и сверху (справа) перемещает базовую линию. Это странно, поскольку базовый уровень вообще не должен быть задействован.

            
           
        
       
       
      
      
       
       
      
        
    • Размещение двух больших элементов в линию и их выравнивание по вертикали перемещает базовую линию в том месте, где она выполняет оба выравнивания. Затем регулируется высота линейного бокса (слева). Добавление третьего элемента, который не выходит за края линейного бокса из-за его выравнивания, не влияет ни на высоту линейного бокса, ни на положение базовой линии (в центре).Если он * действительно * выходит за границы линейного прямоугольника, высота и базовая линия линейного прямоугольника снова корректируются. В этом случае наши первые два поля сдвинуты вниз (справа).

            
           
        
       
       
      
      
       
       
       
      
      
       
       
       
      
        

    Может быть небольшой промежуток ниже встроенных элементов

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

      
     
      

    Как видите, элементы списка располагаются на базовой линии. Под базовой линией есть пространство для нижних элементов текста. Это вызывает разрыв. Решение? Просто переместите базовую линию в сторону, например, выровняв элементы списка с помощью vertical-align: middle :

      
     
      

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

    Разрыв между элементами встроенного уровня нарушает макет

    В основном это проблема самих встроенных элементов. Но поскольку они являются требованием вертикального выравнивания, об этом полезно знать.

    Вы можете увидеть этот промежуток в предыдущем примере между элементами списка. Разрыв возникает из-за белого пространства между встроенными элементами, присутствующими в вашей разметке. Все пробелы между строковыми элементами сворачиваются в одно пространство. Это пространство мешает, если мы хотим разместить два встроенных элемента рядом друг с другом и присвоить им ширину : например, 50% . Не хватает места для двух 50% -ных элементов и места. Таким образом, строка разбивается на две строки, разрушая макет (слева).Чтобы удалить пробел, нам нужно удалить пробел, например, в комментариях html (справа).

      
    
      
        
      
          
             

    50% шириной

    50% шириной ... и в следующей строке

      
    
    шириной 50%
    шириной 50% ... и в следующей строке
    шириной 50%
    шириной 50%

    Вертикальное выравнивание, демистификация

    Ага, вот и все. Это не очень сложно, если вы знаете правила. Если vertical-align не работает, просто задайте следующие вопросы:

    • Где находится базовая линия, а также верхний и нижний края линейного прямоугольника?
    • Где находится базовая линия, верхний и нижний край элементов встроенного уровня?

    Это поможет найти решение проблемы.

    Вот более сложный пример того, как вертикально центрировать элемент в

    с vertical-align: middle .

    Центрирование HTML-элементов с помощью CSS - POFTUT

    CSS обеспечивает центрирование HTML-элементов. Элементы HTML могут иметь разную компоновку с помощью CSS. В этом руководстве мы узнаем, как центрировать текст, изображение, элементы текстового блока HTML с помощью CSS.

    CSS предоставляет атрибуты text-align , где он устанавливает выравнивание текстовых элементов. center Значение может быть предоставлено этому атрибуту для центрирования текстовых элементов, как показано ниже. В этом примере мы центрируем текстовые элементы, такие как h3 и p .

     
    
    <стиль>
    h3 {
    выравнивание текста: центр;
    }
    п {
    выравнивание текста: центр;
    }
    
    
    
    

    Подпись

    Это центрированный текст

    Это центрированный текст

    Это центрированный текст

    Это центрированный текст

    Это центрированный текст

    Это центрированный текст

    Это центрированный текст

    Центрирование строк текста

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

     
    
    <стиль>
    h3 {
    выравнивание текста: центр;
    }
    п {
    маржа слева: авто;
    маржа-право: авто;
    ширина: 12em
    }
    
    
    
    

    Подпись

    Это центрированный текст.Это текст по центру. Это текст по центру. Это текст по центру. Это текст по центру. Это текст по центру. Это текст по центру. Это текст по центру. Это текст по центру. это центрированный текст. это центрированный текст. это центрированный текст. это центрированный текст. это центрированный текст. это центрированный текст. это центрированный текст. это центрированный текст. это центрированный текст. текст - это центрированный текст. это центрированный текст. это центрированный текст. это центрированный текст.Это центрированный текст. Это центрированный текст. V

    Центрирование блока текста или изображения

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

     
    
    <стиль>
    h3 {
    выравнивание текста: центр;
    }
    div {
    маржа слева: авто;
    маржа-право: авто;
    ширина: 12em;
    вертикальное выравнивание: по центру;
    }
    
    
    
    
    

    Этот небольшой абзац...

    Мы также можем центрировать изображение, используя атрибуты CSS margin-left и margin-right . Мы предоставим auto как значение для полей слева и справа.

     
    
    <стиль>
    img {
    дисплей: блок;
    маржа слева: авто;
    маржа-право: авто;
    }
    
    
    
    
    

    Центрировать изображение

    Это обычный текст, в котором нет никаких особых замечаний.

    Париж

    Центрировать изображение

    Мы можем использовать атрибут padding CSS, чтобы центрировать данный текст или изображение по вертикали.

     
    
    <стиль>
    .center {
    отступ: 70 пикселей 0;
    граница: сплошной синий цвет 3px;
    }
    
    
    
    
    

    По центру по вертикали

    Мы можем использовать свойство padding для центрирования по вертикали

    Я по центру вертикально.

    Вертикальное центрирование

    Мы также можем центрировать данный текст или изображение по вертикали и горизонтали. Мы будем использовать атрибуты line-height и vertical-align с разными значениями.

     
    
    <стиль>
    .center {
    высота строки: 200 пикселей;
    высота: 200 пикселей;
    граница: сплошной зеленый цвет 3px;
    выравнивание текста: центр;
    }
    
    .center p {
    высота строки: 1,5;
    дисплей: встроенный блок;
    вертикальное выравнивание: по центру;
    }
    
    
    
    
    

    Центрирование

    Мы также можем центрировать данный текст или изображение по вертикали и горизонтали.Мы будем использовать атрибуты line-heigh и vertical-align с разными значениями

    Я центрирован по вертикали и горизонтали.

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

    Вертикальное выравнивание текста метки (как элемента блока) и текста текстового поля с помощью CSS в ASP .NET - База знаний

    Если вы используете метку и элемент ввода как блочный элемент с CSS, вы не можете использовать vertical-align, border-top, padding-top или margin-top для вертикального выравнивания текстовых значений.

     <% @ Page Language = "C #" AutoEventWireup = "true" CodeBehind = "Default.aspx.cs" Inherits = "Rvl.HelperTools.Website._Default"%>
    
    
    
    
    
         Страница без названия 
    
        
        
    
        
    
    
    
        

    Вертикальное центрирование элементов в HTML

    Опубликовано 18.01.2015

    Предисловие

    Вертикальное выравнивание, в частности центрирование, элементов HTML - классический пример того, что кажется простым, но на практике очень сложным.С этим борются многие веб-разработчики, и не только молодые. Например, я нашел шесть частых (то есть очень популярных) вопросов в сообществе Stack Overflow, посвященных этой проблеме:

    вертикальное выравнивание элементов в div ( сентябрь 2008 г. )
    Вертикальное выравнивание текста рядом с изображением? (, январь, 2009 г. )
    Как вертикально выровнять изображение внутри div (, сентябрь, 2011 г., )
    Как выровнять текст по вертикали по центру в div с помощью CSS? ( Январь 2012 г. )
    Можно ли вертикально выровнять текст в блоке div? (, февраль, 2012 г. )
    Как согласованно выровнять флажки и их метки в разных браузерах ( июль, 2014 г. )

    Причина такой ситуации в том, что нет единого и унифицированного способа выровнять элементы HTML по вертикали, но есть - это один или два менее или более хороших метода, которые все еще не полностью поддерживаются всеми браузерами и платформами, плюс несколько менее или более уродливых и сложных обходных путей.Вероятно, наиболее сбивающим с толку является тот факт, что CSS предоставляет свойство с таким логическим названием «vertical-align», но по разным причинам оно может работать или не работать с определенным элементом в определенных обстоятельствах.

    Было опубликовано много сообщений на форумах, вопросов и ответов и статей в блогах о вертикальном выравнивании и центрировании; существует даже сайт (правда, вполне чистый), специально посвященный этому. Итак, почему я решил внести свой вклад? В основном это потому, что информация очень быстро устаревает в нашем безумном мире, особенно в супер безумном мире компьютерного программирования.Даже действительно хорошие источники, которые, несомненно, были актуальными два или три года назад, в настоящее время почти устарели, и поэтому требуется что-то более свежее.

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

    Сложные методы центрирования

    Я называю следующие методы «сложными» по некоторым причинам.Во-первых, они не очевидны. По логике вещей, когда разработчик хочет центрировать элемент внутри его родителя, он ищет что-то под названием «align», «center» или подобное. Эти методы, однако, используют такие свойства, как 'line-height' или 'position', которые, естественно, не связаны с выравниванием, но могут быть использованы для него. Во-вторых, эти методы основаны на некоторых предположениях, которые существенно ограничивают их использование во многих ситуациях. Наконец, они требуют тонкой настройки на уровне пикселей и поэтому плохо соответствуют подходу адаптивного дизайна.

    Уловка с высотой строки

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

    HTML

    div classcenter-textHello World! Div

    CSS

    .center-text {

    • width500px;
    • height120px;
    • font-size24px;
    • line-height120px;
    • выравнивание текста по центру;
    • цвет фона # fafafa;
    • borderolid 1px светло-серый;

    }

    Как видите, он работает, но с «небольшим» ограничением: работает только с одной строкой текста, в противном случае - нет.Мягко говоря, это не очень мощный метод.

    Трюк с абсолютным относительным положением

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

    HTML

    CSS

    .cnt-div {

    • positionrelative;
    • width500px;
    • height120px;
    • цвет фона # fafafa;
    • borderolid 1px светло-серый;

    }

    .cnt-div> img {

    • абсолютное положение;
    • width64px;
    • height64px;
    • left0;
    • top0;
    • правый0;
    • дно0;
    • marginauto;

    }

    Здесь нам относительно легко удалось центрировать изображение внутри блока div. Это также может быть приемлемо, например, для диалогов с фиксированной шириной, но как насчет динамического содержимого, размер которого мы не знаем заранее?

    Обман с заполнением и полями

    Конечно, мы можем настроить позиции HTML-элементов, играя с заполнением и полями, и есть много рекомендаций по их использованию для центрирования.Однако, как и предыдущий трюк, этот подход хорош только для статического контента и очень проблематичен для динамического. Более того, слишком большие точные размеры в пикселях могут вызвать серьезные проблемы с адаптивным дизайном, поскольку на многих мобильных устройствах «пиксель не пиксель».

    А теперь рассмотрим еще два универсальных и надежных метода.

    Центрирование с использованием таблицы отображения CSS

    Добро пожаловать в старые плохие времена HTML4, когда основным методом компоновки страниц было использование таблиц! Тогда хорошо сработало одно: вертикальное выравнивание.Когда мир наконец совершил долгожданный переход на HTML5 и начал использовать более совершенные методы компоновки, внезапно обнаружилось, что эта функциональность отсутствует. Тем не менее, ничто не мешает нам использовать таблицы без таблиц! Позвольте представить вам три значения свойств отображения CSS: таблица , таблица-строка и таблица-ячейка . Теперь практически любой HTML-элемент может вести себя как таблица, строка или ячейка соответственно.

    Фактически, имитация макета таблицы в HTML5 и CSS3 даже лучше, чем исходная разметка таблицы.Прежде всего, вам не обязательно придерживаться полной структуры таблицы, где таблицы содержат строки, а строки содержат ячейки. Вы можете использовать строки, если хотите, но вы также можете поместить «ячейки таблицы» непосредственно внутри «таблицы». Таблица, однако, обязательна.

    Во-вторых, в то время как строки реальных таблиц допускают только вертикальное выравнивание, а ячейки допускают только горизонтальное, 'display: table-cell' допускает и то, и другое.

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

    HTML

    div classtbl-div

    • spanЭто не проблема для центрирования нескольких строк текста в центре

    div

    div classtbl-div

    div

    . дисплейный стол;

  • width500px;
  • height120px;
  • цвет фона # ffe6cc;
  • borderolid 1px светло-серый;
  • }

    .tbl-div> диапазон {

    • displaytable-cell;
    • выравнивание текста по центру;
    • vertical-alignmiddle;

    }

    Преимущества этого метода по сравнению с описанными ниже уловками очевидны.Он прост, универсален и может использоваться с любыми содержащими и содержащимися типами элементов. Вам не нужно заранее знать содержание; не нужно иметь дело с точными размерами и так далее.

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

    Центрирование с использованием модели гибкой компоновки ящиков

    Хотя описанный выше метод выравнивания на основе таблиц пришел из прошлого, метод гибких ящиков определенно смотрит в будущее. Модель CSS Flexible Box Layout, впервые изобретенная в 2009 году, официально все еще находится в стадии разработки, но современные браузеры уже обеспечили для нее, по крайней мере, базовый уровень поддержки. Я настоятельно рекомендую вам узнать больше о гибкой компоновке, но здесь мы сосредоточимся на нашей цели.

    Модель гибких ящиков предоставляет новую терминологию для правильного описания и, в частности, привносит новый смысл в термины «согласование» и «обоснование».Свойство justify-content определяет расположение элементов по главной оси, а свойство align-items определяет расположение элементов по поперечной оси. Что это означает?

    Основная и поперечная оси зависят от значения свойства flex-direction , которое может быть row (по умолчанию), reverse-row , column или reverse- столбец '. В первых двух случаях главная ось горизонтальна, а поперечная ось вертикальна; и наоборот, во вторых двух случаях главная ось вертикальна, а поперечная ось горизонтальна… звучит достаточно сложно, не правда ли?

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

    Что ж, объяснение, вероятно, было немного сложным, но использование очень простое:

    HTML

    div classflex-div

    • Центрировать несколько строк текста не проблема

    div

    div classflex -divimg srccat.pngdiv

    CSS

    .flex-div {

    • displayflex;
    • width500px;
    • height120px;
    • justify-contentcenter;
    • align-itemscenter;
    • цвет фона # f0fff0;
    • borderolid 1px светло-серый;

    }

    Это было даже более простым и элегантным, чем описанное ранее выравнивание на основе таблиц. Очень короткий и чистый код, без дополнительных элементов и еще более точные результаты. Так почему бы нам не начать использовать этот метод всегда и забыть обо всех его предшественниках? Ответ прост: совместимость.

    Проблема совместимости браузеров

    Согласно информации сайта «Могу ли я использовать», таблица отображения CSS полностью поддерживается всеми менее или более современными браузерами на всех платформах. Однако поддержка модели гибкого бокса менее полная. Internet Explorer 10 обеспечивает только частичную поддержку и требует префикса поставщика; Safari также требует префикса поставщика; и, наконец, Opera Mini еще не поддерживает его.

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

    Наиболее распространенные случаи центрирования

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

    Текстовое поле с центрированием обернутого изображения

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

    CSS

    .wrap-cnt {

    • displayinline-block;
    • width320px;
    • font-size16px;
    • выравнивание текста;
    • padding16px;
    • цвет фона # d7ffff;
    • отображает сплошной серый цвет размером 1 пиксель;
    • box-shadow2px 2px 8px # c0c0c0;

    }

    .wrap-cnt img {

    • floatleft;
    • padding-right10px;

    }

    Чтобы центрировать этот прямоугольник внутри внешнего элемента, например div, используя метод компоновки таблицы, мы применяем те же методы, что и раньше: отображаем контейнер как таблицу плюс дополнительный диапазон, отображаемый как ячейка таблицы внутри :

    HTML

    div classwrap-tbl

    • div
      • div classwrap-cnt

        • img srcdog.pngЭтот контент с изображением и текстом является примером идеального центрирования контента внутри его держателя как по вертикали, так и по горизонтали.
      • div
    • div

    div

    CSS

    .wrap-tbl {

    • displaytable;
    • width500px;
    • height220px;
    • цвет фона # ffe6cc;
    • borderolid 1px светло-серый;

    }

    .wrap-tbl> .span {

    • displaytable-cell;
    • выравнивание текста по центру;
    • vertical-alignmiddle;

    }

    Чтобы центрировать его с помощью гибкой модели бокса, все, что нам нужно, это отобразить контейнер как гибкий и установить для свойств «justify-content» и «align-items» значение «center», как мы уже делали ранее. пример:

    HTML

    div classwrap-flex

    • div classwrap-cnt
      • img srcdog.pngЭтот контент с изображением и текстом является примером идеального центрирования контента внутри его держателя как по вертикали, так и по горизонтали.
    • div

    div

    CSS

    .wrap-flex {

    • displayflex;
    • width500px;
    • height220px;
    • justify-contentcenter;
    • align-itemscenter;
    • цвет фона # f0fff0;
    • borderolid 1px светло-серый;

    }

    Кнопка с иконкой и центрированием текста

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

    HTML

    a href # classtbl-btn

    • spanimg srcsave.pngspan
    • span Сохраните все! Span

    a

    В CSS мы создадим класс для нашего и установите для его свойства display значение table. Затем мы добавляем классы для ячеек и изображения значка. Обратите внимание, что изображение должно иметь свойство float: left!

    УСС

    .tbl-btn {

    • дисплейный стол;
    • цвет черный;
    • текст-украшение нет;
    • padding12px 24px 12px 24px;
    • цвет фона # ffe6cc;
    • borderolid 1px светло-серый;
    • border-radius4px;

    }

    диапазон .tbl-btn {

    • displaytable-cell;
    • vertical-alignmiddle;

    }

    .tbl-btn img {

    • floatleft;
    • margin-right6px;

    }

    Опять же, реализовать ту же задачу с помощью гибкого блока проще.И значок, и текст могут быть размещены непосредственно внутри кнопки, и никакого перемещения не требуется, потому что гибкое центрирование модели достаточно умно для достижения прекрасного результата. Обратите внимание: поскольку кнопка не имеет явной высоты, для свойства display должно быть установлено значение inline-flex.

    HTML

    a href # classflex-btn

    • img srcsave.pngСохраните все!

    a

    CSS

    .flex-btn {

    • displayinline-flex;
    • align-itemscenter;
    • цвет черный;
    • текст-украшение нет;
    • padding12px 24px 12px 24px;
    • цвет фона # f0fff0;
    • borderolid 1px светло-серый;
    • border-radius4px;

    }

    .flex-btn img {

    }

    Меню с иконкой и центрированием текста

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

    HTML

    ul classvmenu-tbl

    • li
      • spanimg srcfacebook.pngspan

      spanFacebookspan

    • литий Li
      • spanimg srcgoogleplus.pngspan

      • spanGoogle + оболочка
    • литий Li
      • spanimg srctwitter.pngspan

      • spanTwitterspan
    • Li

    • li
      • spanimg srcreddit.pngspan
      • spanRedditspan
    • li

    ul

    CSS

    .vmenu-tbl {

    • list-stylenone;
    • padding-left0;
    • font-size15px;

    }

    .vmenu-tbl li {

    • displaytable;
    • ширина 200%;
    • margin0 0 2px 0;
    • padding5px 0 6px 8px;
    • цвет фона # ffe6cc;
    • borderolid 1px светло-серый;

    }

    .vmenu-tbl span {

    • displaytable-cell;
    • выравнивание текста по левому краю;
    • vertical-alignmiddle;

    }

    .vmenu-tbl span: first-child {

    }

    .vmenu-tbl img {

    • floatleft;
    • margin-right6px;

    }

    С моделью гибких ящиков, как и раньше, мы можем написать более чистый и компактный код:

    HTML

    ul classvmenu-tbl

    • liimg srcfacebook.pngFacebookli
    • liimg src'google
    • liimg src'twitter.pngTwitterli
    • liimg src'reddit.pngRedditli

    ul

    CSS

    .vmenu-flex {

    • list-stylenone;
    • padding-left0;
    • font-size15px;

    }

    .vmenu-flex li {

    • displayflex;
    • align-itemscenter;
    • padding5px 8px 6px 8px;
    • margin-bottom2px;
    • цвет фона # f0fff0;
    • borderolid 1px светло-серый;

    }

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

    Элементы управления вводом с центрированием текстовых меток

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

    Использование макета таблицы:

    HTML

    div classchkbxs-group-tbl

    • div classchkbxs-tbl

      • spaninput typecheckboxspan
      • 9span

        9divchk

        1span -tbl

        • spaninput typecheckboxspan
        • spanOption # 2span
      • div

      • div classchkbxs-tbl

      • 90SPAN

          Spaninbox 3 div

          CSS

          .chkbxs-group-tbl {

          • displayinline-block;
          • padding16px 32px 16px 24px;
          • цвет фона # ffe6cc;
          • borderolid 1px светло-серый;
          • border-radius3px;

          }

          .chkbxs-tbl {

          • displaytable;
          • font-size16px;
          • padding0 0 4px 0;

          }

          .chkbxs-tbl> span {

          • displaytable-cell;
          • vertical-alignmiddle;

          }

          .chkbxs-tbl> span: last-child {

          }

          Использование гибких боксов:

          HTML

          div classchkbxs-group-flex

          • div classchkbxs-flex

          • 907heckbox
          • span input typec
          • div

          • div classchkbxs-flex

            • input typecheckboxspanOption # 2span
          • div

          • div classchkbxs4903

          div

          CSS

          .chkbxs-group-flex {

          • displayinline-block;
          • padding16px 32px 16px 24px;
          • цвет фона # f0fff0;
          • borderolid 1px светло-серый;
          • border-radius3px;

          }

          .chkbxs-flex {

          • displayflex;
          • align-itemscenter;
          • font-size16px;
          • padding0 0 4px 0;

          }

          .chkbxs-flex> span {

          }

          Заключение

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

    Добавить комментарий

    Ваш адрес email не будет опубликован.