Выравнивание блока внутри блока css: Выравнивание по центру блока внутри блока

Выравнивание блоков в разметке Flexbox — CSS

Спецификация Выравнивание Блоков подробно описывает, как выравнивание работает при использовании различных способов разметки. На этой странице мы рассмотрим, как работает выравнивание блоков в контексте разметки flexbox. Поскольку эта страница предназначена для подробного описания вещей, относящихся к разметке flexbox и выравниванию блоков, её следует читать вместе с основной страницей выравнивания блоков, в которой подробно описываются общие характеристики выравнивания блоков при использовании разных методах разметки.

В этом примере три элемента flex выровнены по главной оси с помощью атрибута justify-content и по поперечной оси с помощью атрибута align-items. Первый элемент переопределяет значения align-items, устанавливая значение атрибута align-self в center.

Разметка flexbox следует согласно режиму чтения документа (writing mode), поэтому, если вы используете английский язык и устанавливаете атрибут

justify-content в значение flex-end, то элементы будут выровнены по концу flex контейнера. Если вы работаете со значением атрибута flex-direction, установленным в row, то выравнивание будет происходить в линейном направлении.

Однако, работая с разметкой flexbox, вы можете изменить поведение главной оси, установив значение атрибута flex-direction в column. В этом случае, атрибут justify-content будет выравнивать элементы в направлении блока. Поэтому проще всего думать о главной и поперечной осях при работе с разметкой Flexbox следующим образом:

• Главная ось = направление согласно атрибуту flex-direction = выравнивание через атрибут justify-content
• Поперечная ось = проходит поперёк главной оси = выравнивание через атрибут align-content, align-self/align-items

Выравнивание по Главной Оси

• justify-content

Выравнивание по Поперечной Оси

• align-self
• align-items
• align-content

Отсутствие атрибута justify-self в разметке Flexbox

При использовании разметки flexbox, главная ось работает с нашим контентом как с группой. Количество места, необходимого для размещения элементов, рассчитывается, а оставшееся пространство становится доступным для заполнения. Атрибут justify-content контролирует использование оставшегося пространства. Если установить атрибут justify-content в значение flex-end, то дополнительное пространство заполнится перед элементами, если установить атрибут justify-content в значение space-around, то пространство заполнится с обеих сторон элемента в этом измерении и т. д.

Это означает, что атрибут justify-self нет имеет смысла использовать в разметке flexbox, поскольку мы всегда имеем дело с перемещением всей группы элементов.

Использовать атрибут align-self имеет смысл при работе с поперечной осью, так как потенциально есть дополнительное пространство во flex контейнере в этом измерении, один элемент которого может быть перемещён и в начало, и в конец.

В разметке flexbox присутствует конкретный вариант использования, в котором, возможно, понадобится атрибут justify-self. Например, когда будет необходимо разделить набор flex элементов для создания отдельного шаблона навигации. В таком случае, можно использовать атрибут margin со значением auto. Атрибут с таким значением будет занимать все доступное пространство в своём измерении. Так работает центрирование блока со свойством margin:auto. Установив значение атрибутов margin-left

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

Установив значение атрибутаmargin в auto для одного элемента в наборе с flex-элементами, выровненных с начала, можно создать разделённую навигацию. Это хорошо работает с разметкой flexbox и свойствами выравнивания. Как только для элемента со свойством margin: auto не остаётся свободного места, он станет вести себя также, как и все остальные flex элементы, и сократится в объёме, пытаясь уместиться в доступное пространство.

• row-gap
• column-gap
• gap

Создание разрыва фиксированного размера между элементами

На главной оси атрибут column-gap будет создавать разрывы фиксированного размера между соседними элементами.

На поперечной оси атрибут row-gap создаёт разрыв между соседними flex линиями, поэтому необходимо также установить атрибут flex-wrap в значение wrap, чтобы применить эффект.

Примечание: Примечание. Начиная с версии 63, Firefox является единственным браузером, в котором реализованы свойства разрыва в разметке Flexbox.

CSS Атрибуты

• justify-content
• align-content
• place-content (en-US)
• justify-items
• align-items
• place-items
• align-self
• row-gap
• column-gap
• gap

Глоссарий терминов

• Cross axis (en-US)
• Main axis

• Выравнивание в разметке flexbox

• Шпаргалка по выравниваю блоков
• CSS разметки Grid, Flexbox и выравнивание блоков
• Размышления о частичной реализации выравнивания блоков

Last modified: 000Z»>13 авг. 2022 г., by MDN contributors

Красивое выравнивание блоков по резиновой сетке — CSS-LIVE

Сегодня, в мой день рождения (26 апреля), я хочу сделать подарок всем верстальщикам и представить вам абсолютно уникальное, новое и самое главное — полезное решение выравнивания блоков по резиновой сетке, которого так все долго ждали и которого ещё нет в сети.

При верстке резиновых страниц часто возникает задача выстроить однотипные блоки (например, товары в каталоге или фотографии в галерее) по сетке, наподобие таблицы, но гибкой, с заранее неизвестным количеством столбцов. Когда-то единственным способом для этого был float, и блоки приходилось прижимать к левому краю. С помощью inline-block эту задачу можно решить проще и гибче, блоки могут иметь разную высоту, и разное вертикальное выравнивание. Но почему-то такие макеты в массе всё равно прижаты к левому краю. Казалось бы, что мешает отцентрировать эту сетку, а то и вовсе растянуть ее по ширине свободного места c помощью text-align: center или justify соответственно?

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

Проблема

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

Проблема очень похожа в обоих случаях, так что выберем любое свойство из двух, например, text-align: center. А так же воспользуемся маркированным списком.

<ul>
	<li>Пункт 1</li>
	<li>Пункт 2</li>
	<li>Пункт 3</li>
	<li>Пункт 4</li>
	<li>Пункт 5</li>
	<li>Пункт 6</li>
	<li>Пункт 7</li>
	<li>Пункт 8</li>
</ul>

ul {
	font: 14px Verdana, Geneva, sans-serif;
	text-align: center;
}

	ul li {
		display : inline-block;
		width : 80px;
		height: 80px;
		margin-bottom: 10px;
		background: #E76D13;
		vertical-align: top;
		text-align: center;
		line-height: normal;

		/* эмуляция inline-block для IE6-7*/
		//display : inline;
		//zoom : 1;
	}

Ничего необычного в коде нет. Обычный список, всё те же старые добрые элементы строчно-блочного (display : inline-block) уровня. Самое пожалуй интересное, что стоит выделить, это text-align: center, благодаря которому и происходит наше горизонтальное выравнивание.
Пока пункты занимают единственную строку, всё выглядит так.

Но, как только на поле появляется последняя строка, кол-во блоков в которой меньше, чем в предыдущих строках, то получается следующее.

Вроде бы тоже неплохо, всё происходит так, как и должно происходить. Последняя строка так же, как и предыдущие — выравнивается по середине. Но, именно это выравнивание и создаёт нам проблему. Блоки находятся по середине, создавая по бокам много ненужного и пустого пространства. Если бы, например, в последней строке остался всего один блок, то этого бы пространства стало ещё больше, а сам блок болтался бы в середине, как изгой на пустыре.

А теперь, давайте взглянем, чтобы мы хотели получить.

Как видно из рисунка, два элемента в последней строке прижались к левому краю, не смотря на то, что строка по ширине явно больше, чем общая ширина её блоков. Это видно по правому, свободному пространству, которое составляет две трети наших элементов. Именно такое поведение блоков нам и нужно получить в итоге. Т.е. по сути сделать так, чтобы выравнивание элементов было красивым, строящимся ровно по сетке (даже по резиновой), не взирая на своё количество и лишнее пустое пространство в последней строке. Говоря другими словами, нам нужно каким либо образом повлиять на поведение последней строки, заставив её подчиняться нашим правилам.

Как это работает?

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

text-align: center

Начнём пожалуй с text-align: center. В нем можно выделить три основных этапа.

Первый этап
В начале берётся строка. Высчитывается общая ширина слов или неразрывных блоков (inline-block, img, и т.д) в строке. Причём если между этими блоками есть фактические пробелы или же отступы, которые сделаны с помощью таких средств, как word-spacing и прочих, то эти расстояния так же добавляются к общей сумме ширины блоков.

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

Третий этап
Ну и в завершающем этапе происходит следующее. Самая первая в строке площадка с буквой сдвигается вправо ровно на половину результата, полученного после этапа номер два. Что даёт абсолютно равные отступы справа и слева самой строки.
Чтобы лучше понять, как всё происходит, я сделал специальный рисунок.

Перед нами рисунок, на котором изображён контейнер, с двумя строками, ширина которых составляет 500px.
Так же мы можем видеть, что сумма всех блоков в первой строке с их интервалами равна 370px. Значит на третьем этапе наш алгоритм вычел из первого второе (500-370), что дало результат 130. Далее, как я уже говорил, поделил эту сумму ровно на два раза (130/2) и отодвинул самый первый блок вправо, на полученный результат (65px). Таким образом наши блоки оказались точно по середине, с отступы по бокам стали абсолютно одинаковыми. Если бы в первой строке не хватило места, то самый крайний справа блок перешёл бы на второю строку и алгоритм снова включился бы в дело.

Тоже самое касается и второй строки. В ней алгоритм работает точно так же, мало того, можно увидеть, что боковые отступы в ней составляют дробное число (132.5px), так как text-align: center делит общую ширину блоков с их интервалами ровно на 2, как я и говорил.

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

text-align: justify

Механизм text-align: justify

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

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

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

Решение

Сразу забегу вперёд и скажу, что решение для обоих случаев абсолютно идентично, поэтому нет смысла разбирать каждое из них в отдельности. Так что давайте поразмыслим, что у нас есть на данный момент.
Значит, по сути, у нас есть два свойства text-align: justify и center, каждый из которых выравнивает строки по собственному алгоритму. А так же мы уже понимаем, что text-align: center работает с последней строкой, а вот text-align: justify — нет. Но зато мы точно знаем, что если строка, за которой идёт следующая (допустим последняя) будет полностью заполнена, то эти свойства будут выравнивать нашу сетку по нашим правилам. И даже при резиновой ширине контейнера такие заполненные строки будут вести себя так, как нам хотелось бы.

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

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

Итак, для заполнения последней строки, мы будем использовать псевдоэлемент, сгенерированный при помощи :after. Это хороший вариант, так как он поможет решить нам нашу задачу и избавит от лишнего мусора в разметке. По умолчанию псевдоэлементы генерируют строчный блок, а значит именно то, что нам и нужно. Так как inline-block будет представлять из себя одну большую, неразрывную букву и не сможет разбиться на несколько «кирпичей», что не приведёт ни к чему путному. Ну, а block сразу же займёт отдельную строку, и так же, как и inline-block — не принесёт результатов. При этих значениях наша ситуация будет выглядеть примерно так.

ul:after {
	content: 'display: block, мало контента';
	display: block;
	background: #E76D13;
}

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

Из всего вышесказанного можно понять одно, что в нашей ситуации нам может помочь элемент, именно строчного (inline) уровня, т.е. обычный display : inline + строка текста, с пробелами между слов.

ul:after {
	content: 'Обычный строковый элемент, обычный строковый элемент, обычный строковый элемент';
	background: #E76D13;
}

Да, очень похоже. Из скриншота ясно, строчный блок, мало того, что смог повлиять на последнюю строку, так ещё и перенёсся на следующую не полностью, оставив на предыдущей строчке неразрывное слово. По этому слову видно, что по своей ширине оно немного не дотягивает до ширины блоков (100px), а если бы дотягивало, то, возможно, у нас и вышло бы что-то путное.

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

ul {
	font: 14px Verdana, Geneva, sans-serif;
	text-align: center;
	margin: 0px 0 10px;
}
	ul:after {
		content: ' i i i i i i i i ';
		word-spacing: 97px;
		padding-left: 97px;
		/* visibility: hidden; Скрыл это свойство, ради демонстрации процесса*/
	}
		ul li {

			display : inline-block;
			width : 100px;
			height: 100px;
			margin: 0px 0 20px;
			background: #E76D13;
			vertical-align: top;
			text-align: center;

			/* эмуляция inline-block для IE6-7*/
			//display : inline;
			//zoom : 1;
		}

Здорово! Наша сетка выровнена так, как нам надо. Сразу же скажу, что такое выравнивание получается при любой ширине экрана, что не может не радовать. А теперь сама суть.

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

Так что, по сути, мы имеем неразрывные псевдоблоки, в виде «буквы + padding-left» вначале псевдоэлемента, а далее в виде связки «пробел + word-spacing + буква», и так до конца строки. Ну, а на следующей строчке всё повторяется заново, только первый псевдоблок состоит теперь из одной буквы. Но эта строка нас уже не волнует, нас интересуют только те «добавочные блоки», которые дополняют последнюю строку с нормальными блоками в сетке.
Кстати, букв должно хватить, чтобы гарантировано заполнить последнюю строку до конца в худшем случае. Т.е. их число должно быть равно максимальному кол-ву блоков в строке.
Да, и, конечно же, с text-align: justify этот метод работает точно так же.

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

Во-вторых, из-за создания дополнительных элементов снизу образовывается неприятный отступ, который происходит за счёт его размера шрифта и межстрочного интервала. Лекарство в виде обнуления шрифта + межстрочного интервала у родителя и восстановлением их в нормальное состояние у потомков — не приносит результата, так как нужная нам строка в псевдоэлементе становится невидимая, и наша сетка перестаёт её чувствовать и поддаваться дрессировке.
Но есть всё же «почти» выход из ситуации, это нижний отрицательный margin, который может подтянуть часть своего «хвоста», позволяя следующим за ним элементам налезать на него. Подробнее об этом можно почитать тут. Я сказал «почти», потому что этот способ выручает отчасти, я бы сказал, на половину, может чуть больше. Так как в момент создания, уже двух-строчного хвоста, из букв, подтянуть обе строки, уже не представляется возможности.

Во-третьих, чтобы заставить этот метод работать в IE6-7, нам потребуется заменить наш псевдоэлемент дополнительным блоком-помощником, который будет вставлен в конце списка. Плюс к этому придётся воспользоваться такими средствами, как text-justify, text-align-last (их поведение я уже описывал в этой статье), восстановлением свойства zoom в начальное состояние, у дополнительного блока и прочими «радостями», благодаря которым, в этих браузерах наш способ будет работать так же. В конце статьи я обязательно приведу разные варианты этой задачи, чтобы вы могли выбрать нужный.

Резюме

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

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

Все решения воедино

Обновление от 30.03.2017: Современное решение этой задачи на Grid Layout (без хаков и лишнего кода)

P.S. Это тоже может быть интересно:

Как выровнять элементы inline-block по верхней границе контейнера

Многие разработчики сталкиваются с проблемой выравнивания элементов inline-block. Проблема в том, что когда высота нескольких div отличается, div с наименьшей высотой не выравнивается по верхней границе контейнера. Мы покажем решение этой проблемы с помощью CSS свойств.

• Создайте <div> с классом «container».
• Создайте два других span внутри «container». Первый div имеет название «small-box», а второй называется «big-box».

<div>
  <span></span>
  <span></span>
</div>

• Задайте height и width для классов.
• Добавьте color, width и style к border.
• Задайте background для блоков и установите display в значение inline-block, которое отображает элемент в виде блока с внутренней стороны, а с внешней стороны он отображается как строчный элемент.

.container { 
border: 1px solid #666666;
width: 350px;
height: 150px;    
}

.small-box{
display: inline-block;
width: 40%;
height: 30%;
border: 1px solid #666666;
background: #1c87c9;    
}

.big-box {
display: inline-block;
border: 1px solid #666666;
width: 40%;
height: 50%;
background: #8ebf42;    
}

Окончательный результат:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .container { 
      border: 1px solid #666666;
      width: 350px;
      height: 150px;    
      }
      . small-box{
      display: inline-block;
      width: 40%;
      height: 30%;
      border: 1px solid #666666;
      background: #1c87c9;    
      }
      .big-box {
      display: inline-block;
      border: 1px solid #666666;
      width: 40%;
      height: 50%;
      background: #8ebf42;    
      }
    </style>
  </head>
  <body>
    <div>
      <span></span>
      <span></span>
    </div>
  </body>
</html>

Попробуйте сами!

Нашей проблемой является выравнивание .small-box по верхней границе контейнера.

Ключевое слово «top» свойства vertical-align поможет нам в этом вопросе.

Свойство vertical-align указывает вертикальное выравнивание строчного элемента. Значение «top» выравнивает верхний край элемента с верхней линией блока.

Необходимо применить его к .small-box только для того, чтобы он начинался сверху контейнера:

. small-box{ 
vertical-align: top;
}

Теперь наша проблема решена с помощью использования только одного CSS свойства. Давайте посмотрим код полностью.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .container { 
      border: 1px solid #666666;
      width: 350px;
      height: 150px;    
      }
      .small-box{
      display: inline-block;
      width: 40%;
      height: 30%;
      border: 1px solid #666666;
      background: #1c87c9;  
      vertical-align:top;  
      }
      .big-box {
      display: inline-block;
      border: 1px solid #666666;
      width: 40%;
      height: 50%;
      background: #8ebf42;    
      }
    </style>
  </head>
  <body>
    <div>
      <span></span>
      <span></span>
    </div>
  </body>
</html>

Попробуйте сами!

Рассмотрим пример, где высота одного из элементов div больше, чем высота остальных элементов <li>.

Пример, где произошла ошибка:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      #box-one {
      background-color: #1c87c9;
      }
      #box-two {
      background-color:#8ebf42;
      }
      #box-three {
      background-color: #cccccc;
      }
      #box-four {
      background-color: #666666;
      }
      .normal {
      height:100px;
      width:100px;
      display:inline-block;
      }
      .big {
      height:200px;
      width:200px;
      display:inline-block;
      }
      ul {
      display:block;
      }
      ul li{
      display:inline;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>
        <span>Blue</span>
      </li>
      <li>
        <span>Green</span>
      </li>
      <li>
        <span>Grey</span>
      </li>
      <li>
        <span>
        Как выровнять верхние границы всех цветных div. 
        </span>
      </li>
    </ul>
  </body>
</html>

Попробуйте сами!

Нам просто необходимо заменить свойство display на свойство float со значением «left». Мы используем свойство float, которое в большинстве случаев используется вместе со свойством clear. Оно указывает, с каких сторон могут находиться плавающие элементы. В этом примере мы установили clear в «both». Это означает, что плавающие элементы запрещены с правой и левой стороны.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      #box-one {
      background-color: #1c87c9;
      }
      #box-two {
      background-color:#8ebf42;
      }
      #box-three {
      background-color: #cccccc;
      }
      #box-four {
      background-color: #666666;
      }
      .normal {
      height:100px;
      width:100px;
      display:inline-block;
      }
      . big {
      height:200px;
      width:200px;
      display:inline-block;
      }
      ul {
      display:block;
      clear:both;
      content:"";
      display: table;
      }
      ul li{
      float:left;
      list-style-type:none;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>
        <span>Blue</span>
      </li>
      <li>
        <span>Green</span>
      </li>
      <li>
        <span>Grey</span>
      </li>
      <li>
        <span>
          Как выровнять верхние границы всех цветных div.
        </span>
      </li>
    </ul>
  </body>
</html>

Попробуйте сами!

В следующем примере можно увидеть выравнивание элементов уровня inline-block, используя ключевое слово «flex» свойства display, которое используется с расширением -Webkit-.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div{
      color:#ffffff;
      display:flex;
      display: -webkit-flex;
      align-items:flex-start;
      -webkit-align-items:flex-start;
      }
      #box-one {
      background-color: #1c87c9;
      }
      #box-two {
      background-color:#8ebf42;
      }
      #box-three {
      background-color: #cccccc;
      }
      #box-four {
      background-color: #666666;
      }
      .normal {
      height:100px;
      width:100px;
      display:inline-block;
      }
      .big {
      height:200px;
      width:200px;
      display:inline-block;
      padding:10px;
      }
    </style>
  </head>
  <body>
    <div>
      <span>Blue</span>
      <strong>Green</strong>
      <span>Grey</span>
      <span>
      Как выровнять верхние границы всех цветных div. 
      </span>
    </div>
  </body>
</html>

Попробуйте сами!

Выравнивание с помощью флексбоксов | WebReference

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

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

Вот основные свойства из этой спецификации, которые связаны с флексбоксами.

Свойство align-items

Свойство align-items указывает значение align-self по умолчанию для всех флекс-элементов, участвующих в контексте форматирования флекс-контейнера.

<!doctype html> <title>Пример</title> <style> . wrapper { display: flex; align-items: center; background-color: beige; height: 100vh; } .wrapper > div { padding: 20px; font-size: 4vw; color: white; } .red { background: orangered; } .green { background: yellowgreen; } .blue { background: steelblue; } body { margin: 0; } </style> <div> <div>1</div> <div>2</div> <div>3</div> </div>

В этом примере мы применяем align-items: center к флекс-контейнеру, поэтому все флекс-элементы выравниваются по центру оси блока.

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

Свойство align-self

Свойство align-self выравнивает блок внутри содержащего его блока вдоль оси блока, оси колонки или перекрёстной оси.

<!doctype html> <title>Пример</title> <style> .wrapper { display: flex; align-items: center; background-color: beige; height: 100vh; } . wrapper > div { padding: 20px; font-size: 4vw; color: white; } .red { background: orangered; align-self: flex-start; } .green { background: yellowgreen; } .blue { background: steelblue; align-self: flex-end; } body { margin: 0; } </style> <div> <div>1</div> <div>2</div> <div>3</div> </div>

Здесь у красного флекс-элемента задано значение flex-start, а у синего значение flex-end. Это перемещает красный элемент в начало, а синий — в конец. Однако мы не установили значение для зелёного элемента. Поэтому он использует значение по умолчанию, которое в данном случае устанавливается как center с помощью align-items для флекс-контейнера.

Свойство justify-content

Свойство justify-content выравнивает целиком всё содержимое флекс-контейнера по главной оси.

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

<!doctype html> <title>Пример</title> <style> .wrapper { display: flex; justify-content: space-between; background-color: beige; height: 100vh; } .wrapper > div { padding: 20px; font-size: 4vw; color: white; } .red { background: orangered; } .green { background: yellowgreen; } .blue { background: steelblue; } body { margin: 0; } </style> <div> <div>1</div> <div>2</div> <div>3</div> </div>

Свойство align-content

Свойство align-content похоже на justify-content, за исключением того, что align-content выравнивает вдоль поперечной оси.

<!doctype html> <title>Пример</title> <style> .wrapper { display: flex; flex-wrap: wrap; align-content: space-between; background-color: beige; height: 100vh; } .wrapper > div { padding: 10px; width: 60%; font-size: 4vw; color: white; } .red { background: orangered; } .green { background: yellowgreen; } . blue { background: steelblue; } body { margin: 0; } </style> <div> <div>1</div> <div>2</div> <div>3</div> </div>

Свойство place-content

Свойство place-content является сокращением для justify-content и align-content.

<!doctype html> <title>Пример</title> <style> .wrapper { display: flex; flex-wrap: wrap; place-content: space-between center; background-color: beige; height: 100vh; } .wrapper > div { padding: 10px; width: 60%; font-size: 4vw; color: white; } .red { background: orangered; } .green { background: yellowgreen; } .blue { background: steelblue; } body { margin: 0; } </style> <div> <div>1</div> <div>2</div> <div>3</div> </div>

margin

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

<!doctype html> <title>Пример</title> <style> .wrapper { display: flex; align-items: center; justify-content: center; background-color: beige; height: 100vh; } .wrapper > div { padding: 20px; font-size: 4vw; color: white; } .red { background: orangered; align-self: flex-start; margin: auto; } .green { background: yellowgreen; } .blue { background: steelblue; align-self: flex-end; } body { margin: 0; } </style> <div> <div>1</div> <div>2</div> <div>3</div> </div>

См. также

• align-content
• align-items
• align-self
• justify-content
• margin
• margin в CSS
• place-content
• Абсолютное позиционирование
• Блочные элементы
• Выравнивание элементов форм
• Колесо для сокращённых свойств
• Открываем блочную модель
• Свойства flex-контейнера
• Свойства flex-элементов
• Свойство margin
• Создание медиа-объектов
• Строчные элементы
• Схлопывающиеся margin
• Точки между слов

Автор и редакторы

Автор: Йен Диксон

Последнее изменение: 11. 03.2020

Редакторы: Влад Мержевич

Создание медиа-объектов
Ctrl+←

Направление флексбоксов
Ctrl+→

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

Автор: Татьяна Шкабко, Александр Головко Дата публикации:

Представь типичный фрагмент сайта: фотография, а под ней ссылка с выравниванием по-центру:

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

Тоже легко? Контейнеру text-align: center, ссылке display: block, margin: 0 auto, фон и ширину… Стоп! А если ссылка-кнопка резиновая? Ширину-то задавать и нельзя! А без нее блочный элемент разъедется на все доступное пространство. Как же его подогнать под размер содержимого?

Как вариант задать float, например, left. Элемент останется блочным, а значит фоновый рисунок не пострадает, и сожмется до размеров содержимого. Решения найдено? Как бы не так! Теперь margin: 0 auto не работает и кнопка преспокойненько прилипла к левому краю!

Ну и дела! Похоже придется задавать margin-left в зависимости от ширины надписи…

Пробуем включить мозг. Итак:

1. Чтобы присвоить фоновую картинку ссылке, ее нужно сделать блочной.
2. Чтобы спозиционировать блочный элемент по центру экрана нужно задать ему ширину, иначе он растянется на всю ширину родительского элемента.
3. Чтобы элемент не растягивался на всю ширину родителя для него обычно прописывают float: left, но тогда он будет выровнен по левому краю и ему нужно задать отступ слева. Но я не знаю, какой будет отступ слева, потому, что он зависит от ширины кнопки!

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

А ведь именно так и можно сделать! В спецификации CSS2 у свойства display специально на этот случай есть значение inline-block, которое превращает элемент в строчный блок.

Таким образом, решением данной задачи будет следующий код:

	<div>
		<div>
			<img src="path-to/img-inline-block.png" alt="Аватарка с улиткой" />
		</div>
		<a href="#">Комментировать<span></span></a>
	</div>

.parent{
	text-align: center;
}
.button{
	display: inline-block;
	color: #fff;
	position: relative; 
	margin: 0 auto;
	line-height: 32px;
	padding: 0px 6px 0 10px;
	font-size: 12px;
	background: url(path-to/inline-block-button.png) no-repeat;
	text-decoration: none;
	cursor: pointer;
}
.button span{
	position: absolute;
	width: 5px;
	height: 32px;
	right: -4px;
	top: 0;
	background: url(path-to/inline-block-button-cup.png) no-repeat;
}
		

Демонстрационный пример

Проверено в:

• IE 6-8
• Firefox 3.0
• Opera 9. 5-10.5
• Safari 4
• Chrome 5

Такой вариант подойдет для выравнивания любого строчного элемента. Для блочных это тоже работало бы, если бы не одно мелкомягкое НО. Да, ты конечно понял, какое. Я даже не удивился — display: inline-block неправильно работает с блоками в IE6 и даже IE7.

Тем не мение, как всегда, имеется способ побороть разработки Microsoft, к тому же их же оружием. А именно, используя Microsoft свойство hasLayout!

Для того, чтобы все заработало, придется сделать элемент строчным принудительно, задав display: inline, а уже потом присвоить ему layout. В данной ситуации сделать это можно, прописав zoom: 1.

Решение нашей задачи с блочным элементом в главной роли:

	<div>
		<div>
			<img src="path-to/img-inline-block.png" alt="Аватарка с улиткой" />
		</div>
		<div>Комментировать<span></span></div>
	</div>

. parent{
	text-align: center;
}
.button{
	position: relative;
	margin: 0 auto;
	line-height: 32px;
	padding: 0px 6px 0 10px;
	font-size: 12px;
	background: url(path-to/inline-block-button.png) no-repeat;
	text-decoration: none;
	cursor: pointer;
	display: inline-block;
	//display: inline;
	zoom: 1;
}
.button span{
	position: absolute;
	width: 5px;
	height: 32px;
	right: -4px;
	top: 0;
	background: url(path-to/inline-block-button-cup.png) no-repeat;
}
		

Демонстрационный пример

Проверено в:

• IE 6-8
• Firefox 3.0
• Opera 9.5-10.5
• Safari 4
• Chrome 5

Не забудь, что свойство zoom невалидно. Поэтому в боевых условиях выноси его и хак для IE в отдельный CSS, подключаемый с помощью условных комментариев.

Заметка

Также display: inline-block не работает в Firefox 2 и его эмулируют используя вендорное значение display: -moz-inline-stack. Эта информация носит скорее ознакомительный характер, потому что процент пользователей Firefox 2 падает с каждым днем и, думаю, с ним не стоит заморачиваться.

Выводы

Резиновый строчный элемент с фоном можно выровнять по центру родителя просто присвоив родителю text-align: center, а элементу display: inline-block, который превратит элемент в строчный блок.

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

1. В правилах для IE6-7 сделать элемент строчным (display: inline).
2. Установить этому элементу layout.

Основные приемы размещения блоков (div) горизонтально при помощи CSS.

Вы здесь

Главная → Блог → CSS → Способы размещения блоков горизонтально

Дата:4. 10.15 в 13:22

Раздел: 

Часто на практике приходится решать задачу группирования и выравнивания контента средствами CSS. Сегодня мы рассмотрим основные способы размещения элементов в горизонтальный ряд.

Материал данной статьи призван помочь начинающим веб-дизайнерам в освоении приемов верстки web-страниц.

Из чего выбрать или методы

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

• метод «Float»
• метод «Inline-block»
• метод «Table-cell»

Каждый из них имеет свои преимущества, области применения и недостатки. Рассмотрим их по порядку.

«Для рывка» или немного теории

Все структурные элементы HTML можно условно разделить на:

Инлайновые (встроенные) – типа img, span и им подобные. У нас нет возможности менять их фон и задавать им произвольные линейные размеры.

Блочные – занимающие всю ширину родительского блока, всегда начинаются с новой строки – p, h, div.

Наглядный пример встроенных и блочных структур приведен ниже:

Метод «Float»

Как уже известно (см. выше), блочный элемент размещается с новой строки вне зависимости от заданной ему ширины (width). По этому, уменьшая горизонтальный размер div-а, в рядок блочки не построить.

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

CSS свойство float обрело большую популярность и практическую ценность после перехода от табличного способа верстки к блочному.

Float: left (right) трансформирует блочный элемент в плавающий, выравнивает по левому (правому) краю родительского блока и устанавливает обтекание справа (слева) текстом и другими элементами.

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" media="all" type="text/css" href="style. css" />
    </head>
    <body>
        <div>Строим</div>
        <div>горизонтальный</div>
        <div>ряд</div>
        <div>из дивов</div>
    </body>
</html>

И внешнюю таблицу стилей с следующим содержимым:

div {
     float: left; /*Задаем обтекание*/
     line-height: 120px;/*Высота строки +  верт. центрирования текста*/
     font-size: 40px;
     background: dodgerblue;
     color: white;
     margin-top: 60px;
     width: 320px; /*Фиксируем ширину блока*/
     margin-right: 10px;
     text-align: center; /*Центрируем текст по горизонтали*/
    }

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

Иногда на практике бывает необходимо выровнять блоки по правому краю родительского элемента. Изменим обтекание блоков в предыдущем примере:

float: right;

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

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

<div></div>

В рассмотренном выше примере расстояния между блоками мы задавали при помощи отступа margin-right. Но что делать, если у вас при верстке страницы возникла задача: разместить блоки в ряд, центрировать их, да и еще чтобы отступы были только между ними, но никак не снаружи?

Алгоритм действий следующий.

HTML:

<div> <!--Создаем дополнительную обертку-родительский элемент -->
            <div>Строим</div>
            <div>горизонтальный</div>
            <div>ряд</div>
            <div>из дивов</div>
</div>

CSS:

. wrap {
         width: 1310px;/*фиксируем ширину обертки*/
         margin: 0 auto;/*центрируем ее*/
         background: darkgray;
         height: 120px;/*Задаем высоту обертки*/
        }
 
.bblock {
        float: left; /*Задаем обтекание*/
        line-height: 120px;/*Высота строки +  верт. центрирования текста*/
        font-size: 40px;
        background: dodgerblue;
        color: white;
        width: 320px; /*Фиксируем ширину блока*/
        margin-right: 10px;
        text-align: center; /*Центрируем текст по горизонтали*/
}
.wrap :last-child {
        margin-right: 0px;/*Убираем поле последнего div-а*/
                       }

В результате получаем такую картину:

Ну что же, всех практических ситуаций не рассмотришь, по этому перейдем к общим особенностям.

Важно!!!

1. Ширина блоков должна быть фиксированной. Иначе получите что-то такое:

2. При уменьшении размера родительского блока или окна веб-браузера, не вмещающиеся блоки перемещаются вниз друг под дружку. Чтобы исключить такой косяк, примените свойство min-width.
3. Не забывайте указывать !DOCTYPE вашего документа, иначе, при отображении страницы в IE, применив описанный выше метод горизонтального размещения блоков, у вас появится отступ справа порядка 17px (наверное разработчики под скролл разметили).
4. Во избежание различий отображения страницы в разных браузерах, некоторые веб-мастера рекомендуют задавать точные значения свойств margin и padding для body.
5. В отличии от метода «Inline-block» вы не столкнетесь с наличием зазора между блоками при отсутствии margin-ов.
6. Для задания отступов и полей при размещении элементов воспользуйтесь свойствами margin и padding.

Метод «Inline-block»

Как строчные так и блочные элементы имеют свои преимущества и недостатки в контексте каждой конкретной решаемой задачи. А что если объединить их преимущества?

Встречайте, гвоздь программы – свойство display: inline-block.

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

Блочно-строчный элемент имеет следующие свойства:

• высота и ширина блока определяется автоматически по содержимому и значению отступов (padding)
• высота и ширина блока может быть задана фиксировано
• Отсутствует эффект схлопывания границ.

Рассмотрим пример создания простого навигационного меню, содержащего картинку и ссылку.

HTML:

        <div>
            <p><img src="./vaden-pro-logo.png" alt=""  /></p>
            <p><a href="#">Ссылка меню 1 длиннее обычного</a></p>
        </div>
        <div>
            <p><img src="./vaden-pro-logo.png"  alt="" /></p>
            <p><a href="#">Ссылка меню 2</a></p>
        </div>
        <div>
            <p><img src=". /vaden-pro-logo.png"  alt="" /></p>
            <p><a href="#">Ссылка меню 3</a></p>
        </div>
        <div>
            <p><img src="./vaden-pro-logo.png"  alt="" /></p>
            <p><a href="#">Ссылка меню 4</a></p>
        </div>

CSS:

.nav {
	display: inline-block; /*Задаем блочно-строчное отображение*/
  	width: 180px; /*задаем ширину блока*/
	background: dodgerblue;
        }
 
        .string {
         text-align: center; /*Равняем текст по-горизонтали*/
        }

В результате получаем такую менюшку:

Как видим, получилось кривовато… Но расстраиваться мы не намерены, по-этому применяем к нашим дивам CSS свойство vertical-align (подробнее см. ниже):

vertical-align: top;

Теперь наша навигационная панель выровнялась по верхней линии:

Конечно, приведенный пример является примитивным, но я уверен, что на его основе вы сможете создать настоящий шедевр!!!

Важно!!!

1. При уменьшении ширины окна обозревателя невмещающийся элемент перемещаеться вниз (как в случае float: left)
2. Элемент, отображаемый как inline-block чувствителен к пробелам. Это приводит к тому, что даже при нулевых значениях margin между блоками будет зазор. Зазор этот зависит от применяемого шрифта. Для примера рассмотрим список:
   HTML:
   

    <ul>
              <li>Зазор</li>
              <li>между</li>
              <li>блоками</li>
   </ul>

   CSS:

   li {
           display: inline-block; 
      	width: 180px;
    	background: darkgrey;
           color: gold;
           line-height: 120px;
           font-size: 32px
           text-align: center;
           }

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

   Есть несколько способов убрать зазоры:

   Результатом применения любого из выше перечисленных приемов будет следующая структура:

3. Если у вас несколько блочно-строчных элементов подряд имеют разную высоту, то им необходимо задать свойство vertical-align: top. Напомню, что по умолчанию vertical-align присвоено значение baseline.
4. Кросс-браузерность.

 

Метод «Table»

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

Свойства display: table (table-cell, inline-table), позволяют выполнять табличное форматирование элементов без применения HTML таблиц.

Для горизонтального размещения блоков нам понадобится родительский элемент, имеющий свойство display: table, и дочерние элементы (ячейки), имеющие свойство display: table-cell:

<div>
  <div>Строим</div>
  <div>табличный</div>
  <div>ряд</div>
  <div>из дивов</div>
  </div>

.bblock {
	display: table-cell; 
        font-size: 32px;
  	width: 200px;
        height: 200px;
	background: gold;
        text-align: center;
        vertical-align: middle;
}
 
.wrap {
  display: table;  
  border-spacing: 20px 20px; 
  background-color: darkgray;
}

Важно!!!

1. В отличии от методов «Inline-block» и «float», при уменьшении ширины окна веб-браузера, ячейки не перемещаются вниз.
2. У вас нет возможности задавать свойство margin для ячеек псевдотаблицы.
3. Кросс-браузерность. Свойства из семейства display: table* не поддерживаются IE6, IE7. Кроме того, в IE8 вы можете наблюдать динамическую ошибку рендеринга псевдотабличных элементов в виде рандомно пропадающих ячеек. Данная ошибка чаше всего проявляется при первичной прорисовке документа

.

Оценок: 62 (средняя 4.2 из 5)

Оценка: 

Ключевые слова: 

CSS приемы

Понравилась статья? Расскажите о ней друзьям:

Еще интересное

Как выровнять элементы блока по центру с помощью CSS?

Посмотреть обсуждение

Улучшить статью

Сохранить статью

• Последнее обновление: 12 авг, 2021

Читать

Обсудить

Посмотреть обсуждение

Улучшить статью

Сохранить статью

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

Поведение блочных элементов: Любой элемент можно настроить так, чтобы он вел себя как блок, установив для свойства отображения блок «отображение: блок». Есть некоторые другие элементы, такие как заголовки, теги div, которые по умолчанию заблокированы. Таким образом, они занимают всю строку или всю ширину веб-страницы или контейнера, содержащего ее. Даже если наш контент занимает 20% ширины веб-страницы, свойство блока все равно зарезервирует полную 100% ширину веб-страницы или контейнера, содержащего ее.

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

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

Примечание: Мы видим, что «text-align: center» не центрирует элементы блока. Они центрируют только неблочные или встроенные блочные элементы.

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

 margin: auto 

Пример 1:

HTML

< html lang = "en" >     < head >      < meta charset = "UTF-8" /> < Meta HTTP-equiv = "X-ua-equivible = " X-ua-equivible " " X-ua-equivible0063 content = "IE=edge" />      < meta name = "viewport" content =          " width=device-width, initial-scale=1. 0" />          < style >          h3,          p {              text-align: center; } . MyBlock { MARGIN: AUTO;              граница: 2 пикселя сплошного красного цвета;              width: fit-content;              заполнение: 15 пикселей;              text-align: center;              background-color: светло-желтый; } Заголовок { FONT-Size: 40PX;              background-color: светло-зеленый;              поле: авто;              width: fit-content; } . MyInline { Padding: 10px;              граница: 2 пикселя сплошного синего цвета;          }                      .holder {              text-align: center;          }      style > head >     < body >      < H3 > Добро пожаловать в GFG H3 > < P > DEFAULT < P > DEFAUL          < header >hello header >          < div class = "myblock" >          div who has default display : block      div >         < DIV Класс = "Держатель" > < Div < Div 0064 Стиль = "Дисплей: встроенный блок" Класс = "MYINLIN > < Div Стиль = "Дивизион: вход. 0064 = "myinline" >              inline block paragraph 2          div >      div > Body > HTML >

Вывод:

centered block

 

Пример 2: У нас есть одно изображение, вокруг которого есть пространство, поэтому по умолчанию неблочный элемент будет располагаться рядом с тегом img, а не на следующая строка. После установки свойства «display: block» мы можем сделать наше изображение блочным элементом. Его можно центрировать с помощью свойства «margin: auto».

Примечание: Тег body был установлен в свойство text-align: center. Мы знаем, что это не влияет на элементы блока.

HTML

< html lang = "en" >     < head > < Meta Charset = "UTF-8" /> < < < . 0063 meta http-equiv = "X-UA-Compatible" content = "IE=edge" />      < meta name = "viewport" content = "width=device-width, initial-scale=1.0" />      < style >          заголовок {              размер шрифта: 20 пикселей;              поле: авто;              ширина: 30%;              background-color: светло-зеленый;              margin-bottom: 10px;          }                      p {              отображение: встроенный блок; } IMG { Отображение: блок;              поле: авто;          }      стиль > head >     < body >      < header >          centering image используя display: block      header >      0064 < IMG SRC = ALT = «Изображение = ». /> < P > .0063 , если он встроен, потому что IMG - на блок P > 9664966666666666666666666666666666666666666666666666666669. HTML >

Выход:

70027.0003

Страница :

html - Вертикальное выравнивание текста в блочном элементе

Вопрос задан 11 лет, 7 месяцев назад

Изменено 7 месяцев назад

Просмотрено 132k раз

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

 li a {
    ширина: 300 пикселей;
    высота: 100 пикселей;
    поле: авто 0;
    дисплей: блок;
    фон: красный;
} 

 <ул>
    
Я хочу, чтобы этот текст располагался по центру по вертикали
 

Действительно ли для этого нет свойства CSS? Я был бы готов добавить , но я действительно не хочу добавлять больше разметки, чем это.

• HTML
• CSS

1

В соответствии с модулем CSS Flexible Box Layout вы можете объявить элемент a как гибкий контейнер (см. рисунок) и используйте align-items от до по вертикали выравнивание текста по поперечной оси (которая перпендикулярна главной оси ).

Все, что вам нужно сделать, это:

 display: flex;
выравнивание элементов: по центру;
 

Смотрите эту скрипку.

18

Вы также можете попробовать

 a {
  высота: 100 пикселей;
  высота строки: 100 пикселей;
}
 

4

 ли {
ширина: 300 пикселей;
высота: 100 пикселей;
отображение: таблица-ячейка;
вертикальное выравнивание: посередине;
поле: авто 0;
фон: красный;
 

}

4

Вы можете попробовать display:inline-block и :after. Вот так:

HTML

 

    
Я хочу, чтобы этот текст располагался по центру по вертикали

 

CSS

 ли {
    ширина: 300 пикселей;
    высота: 100 пикселей;
    поле: авто 0;
    отображение: встроенный блок;
    вертикальное выравнивание: посередине;
    фон: красный;
}
ли а: после {
  содержание:"";
  отображение: встроенный блок;
  ширина: 1px сплошной прозрачный;
  высота: 100%;
  вертикальное выравнивание: посередине;
}
 

Пожалуйста, просмотрите демо.

2

Подойдет ли использование отступов для ваших нужд?: http://jsfiddle.net/sm8jy/:

 li {
    фон: красный;
    выравнивание текста: по центру;
}
ли а {
    отступ: 4em 0;
    дисплей: блок;
}
 

1

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

 .меню {
  цвет фона: светло-серый;
  высота: 30 пикселей; /* вычислить(16px + 12px * 2) */
}

.menu-контейнер {
  поле: 0px;
  отступ: 0px;
  отступ слева: 10px;
  отступ справа: 10px;
  высота: 100%;
}

.пункт меню {
  тип стиля списка: нет;
  отображение: встроенная таблица;
  высота: 100%;
}

.меню-пункт {
  отображение: таблица-ячейка;
  вертикальное выравнивание: посередине;
  отступ слева: 2px;
  отступ справа: 2px;
  текстовое оформление: нет;
  цвет: начальный;
}

. текст-верхний {
  преобразование текста: верхний регистр;
}

.текст-полужирный {
  вес шрифта: полужирный;
} 

 <заголовок>
  <навигация>
    <ул>
      
StackOverflow
      
Начало работы
      
Теги
    
  
 

Это работает, установив display: inline-table; ко всем

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

Это решение полезно, если вы не знаете высоту вашего элемента.

Совместимость очень хорошая (относительно caniuse.com), с Internet Explorer >= 8.

display: grid; место-содержание: центр;

поля не нужны.

 ли {
    ширина: 300 пикселей;
    высота: 100 пикселей;
    отображение: сетка;
    место-содержание: центр;
    фон: красный;
} 

 <ул>
    
Я хочу, чтобы этот текст располагался по центру по вертикали
 

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

 

<голова>
    <мета-кодировка="UTF-8">
    

<тело>
    <ул>
        

            первая линия
        
        

            две строки точка один
                

                линия две точки два
        
        

            третья линия
        
    
    <дел>
            две строки точка один
                

                линия две точки два
    


 

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

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

1

с благодарностью за ответ Влада за вдохновение; протестировано и работает в IE11, FF49, Opera40, Chrome53

 li > a {
  высота: 100 пикселей;
  ширина: 300 пикселей;
  отображение: таблица-ячейка;
  выравнивание текста: по центру; /* выравнивание по горизонтали */
  вертикальное выравнивание: посередине;
}
 

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

Я придумал и сделал фрагмент

 ли > а {
  высота: 100 пикселей;
  ширина: 300 пикселей;
  отображение: таблица-ячейка;
  /*выравнивание по горизонтали*/
  выравнивание текста: по центру;
  /*Вертикальное выравнивание*/
  вертикальное выравнивание: посередине;
}
тонкий {
  ширина: 40 пикселей;
}
перерыв {
  /*принудительный перенос текста, в противном случае `width` обрабатывается как `min-width` при встрече с длинным словом*/
  слово-разрыв: разбить все;
}
/*больше css, чтобы вам было проще это увидеть*/

ли {
  отображение: встроенный блок;
}
ли > а {
  отступ: 10 пикселей;
  поле: 30 пикселей;
  фон: алисаблю;
}
ли > а: наведите {
  отступ: 10 пикселей;
  поле: 30 пикселей;
  фон: цвет морской волны;
} 

 
Мой пункт меню

Мое меню 
 пункт разрыва

Мой пункт меню очень длинный и громоздкий

Хороший
меню
элемент

Фантастический пункт меню

Фантастический пункт меню



примечание: при использовании "break-all" необходимо также использовать "<br>" или страдать от последствий 

НЕ ИСПОЛЬЗУЙТЕ 4-й раствор сверху, если вы используете ag-grid. Это решит проблему с выравниванием элемента по середине, но это может сломать вещь в ag-grid (для меня я не смог установить флажок после некоторой строки). Проблема не в растворе или аг-сетке, а в какой-то комбинации не очень хорошо.

НЕ ИСПОЛЬЗУЙТЕ ЭТО РЕШЕНИЕ ДЛЯ AG-GRID

 li a {
    ширина: 300 пикселей;
    высота: 100 пикселей;
    поле: авто 0;
    отображение: встроенный блок;
    вертикальное выравнивание: посередине;
    фон: красный;
}
ли а: после {
    содержание:"";
    отображение: встроенный блок;
    ширина: 1px сплошной прозрачный;
    высота: 100%;
    вертикальное выравнивание: посередине;
}
 

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Обязательно, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Как выровнять встроенные блочные элементы по верхней части контейнера

У многих разработчиков возникают проблемы с выравниванием встроенных блочных элементов. Проблема в том, что когда некоторые встроенные блочные элементы имеют разную высоту, почему более короткие из них не выравниваются по верхней части контейнера? Мы собираемся показать решение этой проблемы с помощью свойств CSS.

Давайте обсудим пример ниже.

• Создайте элемент
  с классом "контейнер".
• Создайте два элемента с классами "маленький ящик" и "большой ящик" внутри "контейнера".

 <дел>
  <промежуток> 
  <промежуток> 
 

Попробуй сам "

• Установите границу, высоту и ширину "контейнера".
• Установите отображение на «inline-block» и укажите границу и ширину «контейнера» и
• Установить высоту и фон "маленького ящика" и "большого ящика".

 .контейнер {
  граница: 1px сплошная #666666;
  ширина: 350 пикселей;
  высота: 150 пикселей;
}
.контейнерный интервал {
  отображение: встроенный блок;
  граница: 1px сплошная #666666;
  ширина: 40%;
}
. маленькая коробка {
  высота: 30%;
  фон: #1c87c9;
}
.большая коробка {
  высота: 50%;
  фон: #8ebf42;
} 

Вот окончательный результат.

Пример создания двух встроенных блочных элементов:

 

  <голова>
    
    <стиль>
      .контейнер {
        граница: 1px сплошная #666666;
        ширина: 350 пикселей;
        высота: 150 пикселей;
      }
      .контейнерный интервал {
        отображение: встроенный блок;
        граница: 1px сплошная #666666;
        ширина: 40%;
      }
      .маленькая коробка {
        высота: 30%;
        фон: #1c87c9;
      }
      .большая коробка {
        высота: 50%;
        фон: #8ebf42;
      }
    
  
  <тело>
    <дел>
      <промежуток> 
      <промежуток> 
    

Попробуй сам "

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

Свойство vertical-align определяет вертикальное выравнивание встроенного элемента. Значение «top» выравнивает верхнюю часть выровненного поддерева с верхней частью строки.

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

 .маленькая коробка {
  вертикальное выравнивание: сверху;
} 

Итак, теперь наша проблема решена всего одним свойством CSS. Давайте посмотрим полный код.

Пример выравнивания элементов встроенного блока по верхней части контейнера с помощью свойства vertical-align:

 

  <голова>
    
    <стиль>
      .контейнер {
        граница: 1px сплошная #666666;
        ширина: 350 пикселей;
        высота: 150 пикселей;
      }
      .контейнерный интервал {
        отображение: встроенный блок;
        граница: 1px сплошная #666666;
        ширина: 40%;
      }
      . маленькая коробка {
        высота: 30%;
        фон: #1c87c9;
        вертикальное выравнивание: сверху;
      }
      .большая коробка {
        высота: 50%;
        фон: #8ebf42;
      }
    
  
  <тело>
    <дел>
      <промежуток> 
      <промежуток> 
    
  
 

Попробуй сам "

Результат

Давайте посмотрим на другой пример, где один из элементов имеет большую высоту, чем остальные элементы

.

Вот пример возникновения ошибки.

Пример выравнивания элементов встроенного блока по верхней части контейнера с ошибкой:

 

  <голова>
    
    <стиль>
      #коробка-один {
        цвет фона: #1c87c9;
      }
      #коробка-два {
        цвет фона: #8ebf42;
      }
      #коробка-три {
        цвет фона: #cccccc;
      }
      #коробка-четыре {
        цвет фона: #666666;
      }
      . обычный {
        высота: 100 пикселей;
        ширина: 100 пикселей;
        отображение: встроенный блок;
      }
      .большой {
        высота: 200 пикселей;
        ширина: 200 пикселей;
        отображение: встроенный блок;
      }
      уль ли {
        отображение: встроенный блок;
      }
    
  
  <тело>
    <ул>
      

        Синий
      
      

        Зеленый
      
      

        Серый
      
      

        <диапазон>
        Последний div вертикально выравнивается по последней строке текста своего содержимого.
        Как выровнять верхнюю часть всех цветных div.
        
      
    
  
 

Попробуй сам "

Нам просто нужно заменить свойство display на свойство float. Установите для свойства float значение «left». Итак, в нашем примере мы используем свойство float, которое в большинстве случаев используется со свойством clear элемента. Он указывает, какие элементы могут плавать рядом с очищенным элементом и с какой стороны. Здесь мы устанавливаем для очистки значение «оба», что означает, что плавающие элементы не разрешены как справа, так и слева.

Пример выравнивания элементов встроенного блока по верхней части контейнера со свойством float:

 

  <голова>
    
    <стиль>
      #коробка-один {
        цвет фона: #1c87c9;
      }
      #коробка-два {
        цвет фона: #8ebf42;
      }
      #коробка-три {
        цвет фона: #cccccc;
      }
      #коробка-четыре {
        цвет фона: #666666;
      }
      .обычный {
        высота: 100 пикселей;
        ширина: 100 пикселей;
        отображение: встроенный блок;
      }
      .большой {
        высота: 200 пикселей;
        ширина: 200 пикселей;
        отображение: встроенный блок;
      }
      ул {
        ясно: оба;
        содержание: "";
        дисплей: таблица;
      }
      уль ли {
        плыть налево;
        тип стиля списка: нет;
      }
    
  
  <тело>
    <ул>
      

        Синий
      
      

        Зеленый
      
      

        Серый
      
      

        <диапазон>
        Последний div вертикально выравнивается по последней строке текста своего содержимого.  Как выровнять верхнюю часть всех цветных div.
        
      
    
  
 

Попробуй сам "

В следующем примере мы выравниваем элементы уровня встроенного блока, используя значение "flex" свойства display, которое используется с расширением -Webkit-.

Пример выравнивания элементов встроенного блока по верхней части контейнера со значением "flex" свойства display:

 

  <голова>
    
    <стиль>
      дел {
        цвет: #ffffff;
        дисплей: гибкий;
        отображение: -webkit-flex;
        выравнивание элементов: flex-start;
        -webkit-align-items: flex-start;
      }
      #коробка-один {
        цвет фона: #1c87c9;
      }
      #коробка-два {
        цвет фона: #8ebf42;
      }
      #коробка-три {
        цвет фона: #cccccc;
      }
      #коробка-четыре {
        цвет фона: #666666;
      }
      .обычный {
        высота: 100 пикселей;
        ширина: 100 пикселей;
        отображение: встроенный блок;
      }
      . большой {
        высота: 200 пикселей;
        ширина: 200 пикселей;
        отображение: встроенный блок;
        отступ: 10 пикселей;
      }
    
  
  <тело>
    <дел>
      Синий
      Зеленый
      Серый
      <диапазон>
      Последний div вертикально выравнивается по последней строке текста своего содержимого. Как выровнять верхнюю часть всех цветных div.
      
    
  
 

Попробуй сам "

Выравнивание текста CSS — по центру, по ширине, выравнивание по правому краю Пример стиля текста

Мы используем свойство CSS text-align для выравнивания содержимого внутри блочного элемента.

Примерами блочных элементов являются абзацы (

...

), разделы (

...

), разделы (

...< /section> ), статьи (

...

) и так далее.

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

Содержание

• Основной синтаксис
• Значения свойства text-align
• Осталось Значение
• Центр Значение
• справа Значение
• выравнивание Значение
• наследуют Значение
• Заключение

Основной синтаксис

Вот основной синтаксис для свойства text-align :

 элемент уровня блока {
      выравнивание текста: значение;
    }
 

Теперь мы рассмотрим различные значения, которые он может принимать, чтобы помочь вам расположить объекты на странице.

Значения свойства

text-align

Текстовое выравнивание 9Свойство 0064 принимает слева , по центру , справа , по ширине и наследует в качестве значений.

Мы рассмотрим эти значения одно за другим.

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

 корпус {
      дисплей: гибкий;
      выравнивание элементов: по центру;
      выравнивание содержимого: по центру;
      высота: 100вх;
    }
    дел {
      цвет фона: #adadad;
      ширина: 40рем;
      высота: 4рем;
      набивка: 3рем 0,5рем;
    }
 

Осталось

Значение

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

 дел {
      выравнивание текста: по левому краю;
    }
 

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

Центр

Значение

При значении center пробелы создаются слева и справа, поэтому все смещается в центр.

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

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

Правая

Значение

Присвоение значения right свойству text-align сдвигает содержимое внутри блочного элемента вправо.

 дел {
      выравнивание текста: вправо;
    }
 

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

Значение

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

 дел {
      выравнивание текста: по ширине;
    }
 

наследуют Значение

наследует значение свойства text-align и ведет себя так, как следует из названия. Элемент со значением text-align inherit наследует значение text-align своего прямого родителя.

 дел {
      выравнивание текста: наследовать;
    }
 

В этом случае наш div наследует значение text-align тела — вместо по умолчанию.

Если text-align 9Значение 0064 тела устанавливается равным right , а значение div остается для наследования, текст внутри div выравнивается по правому краю.

 корпус {
      выравнивание текста: вправо;
    }
    дел {
      выравнивание текста: наследовать;
    }
 

Заключение

В этой статье вы узнали о свойстве CSS text-align и его значениях.

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

Ниже приведено изображение внутри блока div с выравниванием текста по центру:

 <дел>
      <изображение
        src="скоро.jpg"
        alt="приходит_скоро"
       
       
      />

 

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

Спасибо, что прочитали.

---

---

Научитесь программировать бесплатно. Учебная программа freeCodeCamp с открытым исходным кодом помогла более чем 40 000 человек получить работу в качестве разработчиков. Начать

Почему не работает выравнивание текста по центру? Учебник по блочным и встроенным элементам в HTML и CSS — блог Terresquall

Если вы только начинаете свой путь в веб-разработке, вы, вероятно, обнаружите, что HTML и CSS имеют множество особенностей, которые могут сделать работу с ними несколько разочаровывающей. для начинающих. Одна из этих особенностей связана с CSS-атрибутом text-align , поскольку этот атрибут применяет свои эффекты только к определенным типам элементов HTML.

1. Introduction
2. inline elements
   1. About inline elements
   2. Vertically aligning inline elements
3. block elements
   1. About block elements
   2. Centre-aligning blocks
   3. Left or right- выравнивание блоков
   4. Использование text-align для текста внутри блоков
4. Переключение типа элемента
5. Вывод

1. Введение

Как и ожидалось, поскольку атрибут называется text-align , он влияет на выравнивание текстовых элементов на странице :

 

    Этот текст выровнен по центру.
 

Этот текст выровнен по центру.

Интересно, что по умолчанию (и в современных браузерах) text-align:center также влияет на элементов, хотя они явно не являются «текстовыми»:

 

     png" alt="Значок блога Terresquall"/>
 

Обратите внимание, однако, что text-align:center не всегда работает.

 <дел>
    <в сторону>
        Этот боковой блок не выровнен по центру.
    
 

Этот серый боковой блок не выровнен по центру.

Это связано с тем, что text-align:center влияет только на встроенные элементы, а