Css выравнивание блоков – Как выровнять блоки по высоте самого высокого элемента при динамическом изменении этой самой высоты?

Равномерное выравнивание блоков по ширине / Habr

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


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

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

*В этом обзоре я не стал постить разбор этапов всего алгоритма, об этом можно почитать в самой статье. Главное, чтобы вы понимали суть.

Наша задача

* Сразу хочу сообщить, что вариантов (рабочих и не очень) на самом деле получилось целых 4 штуки, плюс ещё куча интересных и полезных разобранных нюансов, на огромную статью (в моём стиле). Поэтому тут я вкраце опишу некоторые из них 🙂

Варианты 1 и 2

Варианты 3

третий вариант

Весь секрет оказался в последней строчке следующего кода:

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li></li>
</ul>

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

        /* Обнуляем для родителя*/
        line-height: 0;
        font-size: 1px; /* 1px для Opera */

        /* Лекарство для IE6-7*/
        text-justify: newspaper;
}

Варианты 4

В обзоре 3-го варианта я сказал, что SelenIT2 подсказал мне два свойства, одно из которых (text-justify: newspaper) помогло нам в предыдущем варианте, а другое как раз помогло в этом! Причём в этот раз они объединились и уже с двойной силой смогли победить последний вариант.

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

        /* Обнуляем для родителя*/
        line-height: 0;
        font-size: 1px; /* 1px для Opera */

        /* Лекарство для IE6-7*/
        text-justify: newspaper;
        zoom:1;

        /* Включаем в работу последнюю строку*/
        text-align-last: justify;
}

Кстати, эти свойства специфицированы, а не какая-нибудь проприетарщина (кроме значения newspaper, которое теперь называется иначе). Так что ни один котенок не пострадает) И хочу подчеркнуть, что баг IE6-7 поборен с помощью CSS3 — кто еще когда такое видел? 🙂

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

Если краткого обзора кому-то показалось мало, то я рекомендую прочитать вот эту (уже большую) статейку с доскональным разбором полётов. Но, предупреждаю! Статья действительно не маленькая, поэтому перед началом чтения лучше запастись вашими любимыми печеньками с чаем 🙂

Равномерное выравнивание блоков по ширине — CSS-LIVE

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

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

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

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

Этап первый
Сначала в строке текста ищутся минимальные, неразрывные «кирпичики». Это могут быть отдельные слова в тексте, картинки, инлайн-блоки, инлайн-таблицы и т.д. В общем всё то, что в случае необходимости перенесется на новую строку как единое целое.

Цифрой 1 на картинке отмечены обычные инлайн-боксы, т.е. попросту текст или инлайн элементы, такие, например, как < span> или <em>.
Под цифрой 2 у нас находится элемент строчно-блочного уровня, т.е inline-block. Как можно заменить, алгоритм отступов внутри него рассчитывается заново. Причина в том, что внутри себя

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

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

Этап третий — завершающий
Третьим и последним этапом алгоритма будет деление полученной цифры (в данном случае 116) на количество пробелов в строке (в нашей строке их 7). Из полученного результата (16.571) вычитается ширина одного пробела и уже это значение добавляется к каждому из них. Что в итоге даёт равномерное распределение отступов во всей строке.

Итог
Как мы можем видеть, алгоритм работы text-align: justify не так уж и сложен на самом деле, всё вроде бы понятно и логично. Я уверен, что каждый из нас, решая подобную задачу, высчитывал бы результат, по точно такому же сценарию. Сложность заключается только в том, чтобы написать хорошее, красивое, а главное качественное решение, затратив при этом минимум материала. Ведь существует много подводных камней, в виде последней (не попадающей под алгоритм) строки, которую нужно прятать, или каким либо образом выравнивать точно так же, как и все остальные. Ну и естественно нельзя забывать об интерпретации кода, таких браузеров, как Opera, IE6-7, которые любят преподносить неожиданные сюрпризы.

Наша задача

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

Вариант 1

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

<ul>
	<li>
		<div></div>
	</li>
	<li>
		<div></div>
	</li>
	<li>
		<div></div>
	</li>
	<li>
		<div></div>
	</li>
	<li>
		<div></div>
	</li>
</ul>

А CSS таким

ul {
	font: 14px Verdana, Geneva, sans-serif;
	overflow: hidden;
}
	ul li {

	}
	ul li.left {
		width: 20%;
		float: left;
	}
	ul li.right {
		width: 20%;
		float: right;
		text-align: right;
	}
	ul li.center {
		text-align: center;
	}
	ul li .content {
		background: #E76D13;
		width: 98px;
		height: 98px;
		display: inline-block;
		text-align: left;
		border: 1px solid #000;

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

Что мы собственно сделали? А сделали мы следующее. Два левых и два правых пункта мы раскидали по разным сторонам с помощью float : left и float : right соответственно, при этом назначив им по 20% ширины каждому, что в сумме дало 80% от всей ширины контейнера. Последний пункт, я решил не делать обтекаемым, так как его содержимое само по себе занимает всё оставшиеся пространство после float-блоков.
Соответственно для такого решения пришлось пожертвовать разметкой, а точнее дополнительными классами + внутренними контейнерами для контента. Как вы могли заметить, каждый из этих контейнеров я сделал строчно-блочным, повесив на них display : inline-block, благодаря чему мой контент смог выравниваться в любую сторону с помощью text-align у родителя. Эти «жертвы» с большой натяжкой можно было бы отнести к хорошему решению, если бы не некоторые, весомые «но».
Во-первых, как видно из скриншотов, равномерные отступы имеют только боковые пункты, а между средним и остальными есть явная разница. И чем больше ширина контейнера, тем заметнее это становится.
Во-вторых, ради эксперимента, я назначил второму пункту ширину, равную 200px.

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

Вариант 2

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

<ul>
	<li>
		<div>1</div>
	</li>
	<li>
		<ul>
			<li>
				<div>2</div>
			</li>
			<li>
				<div>3</div>
			</li>
			<li>
				<div>4</div>
			</li>
			<li>
				<div>5</div>
			</li>
		</ul>
	</li>
</ul>

ul {
	font: 14px Verdana, Geneva, sans-serif;
	overflow: hidden;
}
	ul li.one {
		float: left;
	}
	ul li.two {
		overflow : hidden;
		float : none;
	}
	ul li.two li {
		width: 25%;
		text-align: right;
		float: left;

		/* Лекарство для IE6-7*/
		//width: 24.9%;
	}

	ul li .content {
		background: #E76D13;
		width: 98px;
		height: 98px;
		display: inline-block;
		text-align: left;
		border: 1px solid #000;

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

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

Левая колонка прижата к левому краю и содержит в себе самый первый, одиночный блок. Это нужно для того, чтобы правая часть прижималась вплотную с правой стороны и растягивалась на всё оставшееся место. Растяжка правой части происходит благодаря overflow : hidden, который создаёт свой контекст форматирования, т.е. по сути свой собственный, независимый контейнер. Для всех дочерних элементов этого контейнера его ширина составляет 100% и поэтому блоки внутри него мы растягиваем в соответствии с этим правилом. Четыре блока имеют ширину 25%, что в сумме даёт 100. На изображении можно увидеть, как расположены эти блоки. Видно, что строчно-блочные элементы с контентом внутри них выровнены по правому краю с помощью text-align : right, благодаря чему самый правый блок прижат к своей боковой стенке, так же как и левый.

Благодаря таким «жертвам» с двумя колонками, мы получили отличный результат, и как видно из первых рисунков, при разных разрешениях, расстояние отступов между блоками остаётся абсолютно одинаковым. Это происходит за счёт равнозначных блоков в правой части. Ширина каждого из них составляет 25%, а элемента внутри них — 100px. Что и даёт равные отступы слева от каждого «кирпичика» в отдельности.
На данный момент можно смело заявить, что при фиксированной ширине блоков у нас получилось именно то, что мы хотели.

Но всё же интересно узнать, что будет, если мы поменяем ширину сначала у первого, а потом и у любого блока из правой части. Давайте для начала поставим левому… ну допустим 150px.

ul li.one .content { width: 150px;}

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

Эх, а вот этот эксперимент потерпел неудачу. Правый отступ у самого левого блока оказался меньше, чем все остальные. Всё легко объясняется тем, что контент первого элемента в правой части, стал больше на 50px, а так как он выровнен по правой стороне, то ширина визуально прибавилась к его левой части и соответственно стала отличаться от ширины соседних блоков. Ну и естественно поменялся отступ, который стал меньше ровно на 50px.

Из всего этого можно сделать вывод, что данный метод явно лучше, чем его предшественник и то, что он имеет право на жизнь. Единственный его недостаток связан с тем, что мы не может задать разную ширину блокам, и должны придерживаться одинаковой. Так что, если у вас есть список, в котором все пункты имеют равную ширину, то вы вполне можете применять этот подход. Конечно же, нужно понимать, что без двухколоночной структуры тут не обойтись + нужна обязательная минимальная ширина у контейнера (min-width), иначе при маленькой ширине экрана блоки будут наезжать друг на друга.
* Кстати, у себя в примере, в правом контейнере я использовал четыре блока по 25%, и их общая сумма составила 100%. Поэтому нужно помнить, что если блоков будет, ну скажем 6, то ширина каждого из них, будет равна 16.666, что говорит о дробных процентах, которые, например, не поддерживаются в браузере Opera.
Соответственно результат в этом случае будет немного не тем, чем вам хотелось бы.

Вариант с двумя колонками

Вариант 3 — text-align: justify

Стоит отметить, что до этого момента, ни в одном примере, мы ни разу не воспользовались text-align: justify, даже не смотря на то, что именно на основе его алгоритма и строятся все наши решения. Я предлагаю нарушить эту традицию и, наконец, пустить уже в дело этого зверя.

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

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li></li>
</ul>

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

	ul li  {
		background: #E76D13;
		width: 98px;
		height: 98px;
		display: inline-block;
		text-align: left;
		border: 1px solid #000;

		/* эмуляция inline-block для IE6-7*/
		//display : inline;
		//zoom : 1;
	}
	ul li.helper {
		width: 100%;
		height: 0;
		visibility: hidden;
	}

Из кода ясно, что мы создали список с пятью основными и одним элементом — помощником. text-align: justify на главном элементе-родителе (ul), заставляет своих потомков подчиняться своему алгоритму. Ведь, как известно, это свойство работает с текстом, а так как наши строчно-блочные (display: inline-block) пункты, по сути и являются неразрывными словами в строке, то это поведение вполне закономерно. Кстати, стоит учесть, что text-align: justify наследуемое свойство, поэтому text-align: left на ближайших потомках — необходимая мера. Этим самым мы как бы возвращаем выравнивание содержимого наших блоков в прежнее состояние.
В первой части статьи я упоминал, что наш алгоритм не распространяется на последнюю строку, а работает со всеми строками кроме неё. Поэтому я добавил в конец ещё один элемент, пустышку, и растянул его на 100% по ширине, тем самым заставив его растянуться на самую последнюю строчку в списке. С помощью нехитрых приёмов (height: 0, visibility: hidden) я, можно сказать, почти что спрятал его. Почему я сказал  «Почти что»? Об этом чуть позже, для начала давайте взглянем на то, что у нас вышло.

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

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li></li>
</ul>

Добавим для них свои правила.

.first { width: 150px;}
.third { width: 200px;}

Проверяем.

Я специально увеличил ширину экрана, чтобы при маленькой ширине блоки не перескакивали на другую строку, как обычные слова в тексте. Но, если посмотреть на результаты алгоритма, то он работает! Пробелы между элементами остаются равнозначными, даже не смотря на то, что у двоих из них, мы увеличили ширину.
Т.е. можно с лёгкостью заявлять, что этот метод, с дополнительным элементом в конце — даёт отличный результат и, если ограничить экран по ширине, то его применение на практике нас не разочарует.
Так, ну а теперь, пожалуй, настало время подлить ложку дёгтя.
Во-первых, как вы могли заметить, во всех примерах я перечислял все браузеры, кроме IE6-7.
Во-вторых, опять же, как вы, наверное могли видеть на рисунках, внизу нашей строки, где дополнительный элемент, есть большие, непонятные отступы.
Давайте разбираться по порядку.

Первая проблема — это проблема IE6-7. Не приводя скриншоты, скажу сразу, что наш метод там не работает. Пункты в этих браузерах прижаты друг к другу вплотную и не растягиваются в строке. Дело в том, что парсер IE6-7 полностью игнорирует закрывающие теги у элементов <li>. А нет тегов — значит нет пробелов между ними, и, следовательно text-align: justify пропускает нашу строку, состоящую по сути из одних «строчно-блочных» слов, прижатых друг к другу.

За решением данной проблемы мы отправляемся на самую высокую гору… на MSDN. Мда… найти что либо на этом сайте, представляет большую трудность. Но, всё же повозившись, некоторое время, решение было найдено! text-justify: newspaper — свойство для увеличения или уменьшения интервалов между буквами и между словами. MSDN заявляет, что эта вещь «Самая навороченная форма выравнивания для латинского алфавита», а вот в этой статье ещё есть и дополнение, что для арабских текстов это свойство вытягивает и сами буквы.
Отлично, нам как раз нужно что-нибудь наподобие. Давайте-ка проверим их слова на деле.

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

	/* Лекарство для IE6-7*/
	text-justify: newspaper;
}

	ul li  {
		background: #E76D13;
		width: 98px;
		height: 98px;
		display: inline-block;
		text-align: left;
		border: 1px solid #000;

		/* эмуляция inline-block для IE6-7*/
		//display : inline;
		//zoom : 1;
	}
	ul li.helper {
		width: 100%;
		height: 0;
		visibility: hidden;
	}
	.first { width: 150px;}
	.third { width: 200px;}

А вот и результат.

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

Вторая проблема связана с непонятным отступом между низом списка и нашей строкой с элементами. В чём же дело? А дело в том, что всё вполне закономерно и этими странными отступами являются ни кто иные, как межстрочный интервал (line-height) и размер шрифта (font-size), которые априори присутствуют у строк и букв в тексте. Наши элементы — блочные только внутри, а строчные снаружи, поэтому они и попадают под эти правила.
Как быть? А легко! Мы можем повесить на контейнер обнуление этих стилей, а уже у потомков восстановить их в прежнее состояние. Пробуем.

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

	/* Обнуляем для родителя*/
	line-height: 0;
	font-size: 1px; /* 1px для Opera */

	/* Лекарство для IE6-7*/
	text-justify: newspaper;
}

	ul li  {
		background: #E76D13;
		width: 98px;
		height: 98px;
		display: inline-block;
		text-align: left;
		border: 1px solid #000;

		/* Востанавливаем у потомков, кроме последнего*/
		line-height: normal;
		font-size: 14px;

		/* Без него в Opera будет отступ под элементами */
		vertical-align: top;

		/* эмуляция inline-block для IE6-7*/
		//display : inline;
		//zoom : 1;
	}
	ul li.helper {
		width: 100%;
		height: 0px;
		visibility: hidden;
		overflow: hidden;
	}
	.first { width: 150px;}
	.third { width: 200px;}

Результат.

До обнуления

После обнуления

Отлично! Всё получилось. Обнуление стилей у главного контейнера помогло нам. Единственное, что теперь стоит помнить, это то, что в связи с обнулением размера шрифта мы не сможем задать нашим пунктам шрифт в таких единицах длины, как em, а так же % для <body> не принесут желаемого результата. Но, а целом, наш метод работает идеально, так что можно подводить итоги и идти дальше, ведь нам же мало одного решения, нам же нужно больше и лучше, не правда ли?

Подводя промежуточные итоги, скажу, что данный подход пока что лидер среди присутствующих до сей поры решений, и что, я лично, не вижу в нём ни одного изъяна, правда, кроме… Кроме дополнительного элемента в конце строки, плюс, как мне кажется, неактуальные проблемы с % и em. Но, эти натянутые минусы, никак не могут быть причиной отказа от представленного варианта. Так что смотрим результат и идём дальше.
Вариант дополнительным элементом

Вариант 4 — Избавление от дополнительного элемента

В предыдущем варианте для нашей цели мы использовали дополнительный элемент, ставя его в конец списка. С одной стороны, конечно же, этот маневр принес свои плоды, но с другой… но с другой стороны создал некие неудобства. Например, при динамическом добавлении пунктов, вспомогательный блок будет только мешать, да и потом этот «хвост» портит нашу структуру, засоряя её. В этом варианте, я предлагаю избавиться от него, не испортив при этом решение.
В CSS2.1 уже давно есть такие вещи, как псевдоэлементы. Это такие абстрактные сущности, которые могут быть сгенерированы каким нибудь элементом и вставлены в его начало или конец. Почему бы не заменить таким псевдоэлементом наш лишний вспомогательный блок? Давайте попробуем…

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>

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

	/* Обнуляем для родителя*/
	line-height: 0;
	font-size: 1px; /* 1px для Opera */

	/* Лекарство для IE6-7*/
	text-justify: newspaper;
	zoom:1;
}
	ul:after {
			width: 100%;
			height: 0;
			visibility: hidden;
			overflow: hidden;
			content: '';
			display: inline-block;

	}
		ul li  {
			background: #E76D13;
			width: 98px;
			height: 98px;
			display: inline-block;
			text-align: left;
			border: 1px solid #000;

			/* Востанавливаем у потомков, кроме последнего*/
			line-height: normal;
			font-size: 14px;

			/* Без него в Opera будет отступ под элементами */
			vertical-align: top;

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

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

Здорово! Трюк с псевдоэлементом сработал. Теперь наша разметка чистая, аккуратная и без лишнего «мусора». Нам удалось избавиться от дополнительного элемента, полностью заменив его сгенерированным.
Но, как обычно, не обошлось без IE6-7 приключений. К сожалению, в браузерах IE6-7 нет поддержки :after и :before. А если нет поддержки, следовательно и нет никаких вспомогательных блоков, а значит и растягивать попросту нечего. Поэтому картина в этих браузерах такова.

Как видно из скриншота, IE6-7 полностью игнорирует пробелы между блоков, прижимая их вплотную друг к другу. Даже не смотря на то, что мы уже задействовали тяжёлую артиллерию в виде text-justify: newspaper. Почему же это происходит? Давайте выясним.
Оказывается всё дело в том, что text-justify: newspaper лишь даёт возможность растягивать наши буквы (inline-block), но не команду. Проще говоря, он рассказывает строке, как бы он хотел, чтобы она была растянута, а text-align: justify является растягивающей силой. Т.е. text-align: justify отвечает за растяжение строки, а text-justify: newspaper лишь уточняет, как именно это растяжение будет происходить.
Да, но тогда возникает вопрос: «Если есть и возможность и сила, которая может её исполнить, то почему же тогда ничего не происходит?». Ответ кроется в самом свойстве text-align: justify. Если вы помните, в обсуждении его алгоритма я упомянул о том, что он не распространяется на последнюю строку в тексте. А так как мы убрали вспомогательный элемент в конце списка, то соответственно наша строка (пускай даже она одна) с блоками — стала уже последней, и следовательно алгоритм отказался с ней работать.

Как же быть? Есть ли выход?
К счастью мир не без добрых людей, и один такой добрый человек направил меня на верный путь. Оказывается решение было у меня под носом. text-align-last — свойство, которое включает алгоритм text-align: justify в самой последней строке текста, если к ней применён этот самый text-align: justify. Проще говоря, когда мы применяем к тексту обычный text-align: justify, то, видя это, text-align-last указывает первому на то, что он поступает плохо и что ему придётся теперь работать и в последней строчке тоже.
Самое интересное, что это свойство считается ориентированным именно на Internet Explorer, в котором он нам как раз и нужен). В общем пора переходить к делу.

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

	/* Обнуляем для родителя*/
	line-height: 0;
	font-size: 1px; /* 1px для Opera */

	/* Лекарство для IE6-7*/
	text-justify: newspaper;
	zoom:1;

	/* Включаем в работу последнюю строку*/
	text-align-last: justify;
}
	ul:after {
			width: 100%;
			height: 0px;
			visibility: hidden;
			overflow: hidden;
			content: '';
			display: inline-block;

	}
		ul li  {
			background: #E76D13;
			width: 98px;
			height: 98px;
			display: inline-block;
			text-align: left;
			border: 1px solid #000;

			/* Востанавливаем у потомков, кроме последнего*/
			line-height: normal;
			font-size: 14px;

			/* Без него в Opera будет отступ под элементами */
			vertical-align: top;

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

Да! У нас получилось. text-align-last: justify сделал то, что от него требовалось, и сделал это на 5 баллов. Алгоритм включился в работу, в нашей последней и единственной строке. Так что празднуем победу и подводим итоги этого способа.

Ну что ж, я доволен. Доволен тем, что нам удалось найти действительно достойное решение. Причём не просто найти, а разобраться во всём и довести его до абсолютной кроссбраузерности, затратив минимум кода и не засоряя разметки. На лицо одни плюсы, а что же с минусами? Как по мне, так их попросту — нет. По сравнению с предыдущим вариантом, в этом мы только улучшили результаты. Разве что…

Единственное, что теперь стоит помнить, это то, что в связи с обнулением размера шрифта мы не сможем задать нашим пунктам шрифт в таких единицах длины, как em, а так же % для <body> не принесут желаемого результата.

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

Резюме

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

Все варианты воедино

1. Вариант с разносторонним выравниванием (К сожалению неработающее решение. Надеюсь, что в комментариях кто нибудь натолкнёт на верный путь)
2. Вариант с двумя колонками (Работающее решение, но только с фиксированными по ширине блоками)
3. Вариант дополнительным элементом (Работающее решение)
4. Вариант с псевдо-элементом (Работающее решение)

Обновление от 08.10.2014

Вариант 5 — используем новые технологии

5. Вариант с использованием флексбоксов и постепенным улучшением

См. отдельную статью

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

Красивое выравнивание блоков по резиновой сетке — 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. Это тоже может быть интересно:

Css вертикальное выравнивание блока — Вэб-шпаргалка для интернет предпринимателей!

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

Горизонтальное

text-align

Для центрирования инлайновых элементов – достаточно поставить родителю text-align: center :

Для центрирования блока это уже не подойдёт, свойство просто не подействует. Например:

margin: auto

Блок по горизонтали центрируется margin: auto :

В отличие от width/height , значение auto для margin само не появляется. Обычно margin равно конкретной величине для элемента, например 0 для DIV . Нужно поставить его явно.

Значение margin-left:auto/margin-right:auto заставляет браузер выделять под margin всё доступное сбоку пространство. А если и то и другое auto , то слева и справа будет одинаковый отступ, таким образом элемент окажется в середине. Детали вычислений описаны в разделе спецификации Calculating widths and margins.

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

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

Есть три основных решения.

position:absolute + margin

Центрируемый элемент позиционируем абсолютно и опускаем до середины по вертикали при помощи top:50% :

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

Высота центрируемого элемента должна быть известна. Родитель может иметь любую высоту.

Если мы знаем, что это ровно одна строка, то её высота равна line-height .

Приподнимем элемент на пол-высоты при помощи margin-top :

При стандартных настройках браузера высота строки line-height: 1.25 , если поделить на два 1.25em / 2 = 0.625em .

Конечно, высота может быть и другой, главное чтобы мы её знали заранее.

Можно аналогично центрировать и по горизонтали, если известен горизонтальный размер, при помощи left:50% и отрицательного margin-left .

Одна строка: line-height

Вертикально отцентрировать одну строку в элементе с известной высотой height можно, указав эту высоту в свойстве line-height :

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

Таблица с vertical-align

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

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

Его возможные значения:

baseline Значение по умолчанию. middle , top , bottom Располагать содержимое посередине, вверху, внизу ячейки.

Например, ниже есть таблица со всеми 3-мя значениями:

Обратим внимание, что в ячейке с vertical-align: middle содержимое находится по центру. Таким образом, можно обернуть нужный элемент в таблицу размера width:100%;height:100% с одной ячейкой, у которой указать vertical-align:middle , и он будет отцентрирован.

Но мы рассмотрим более красивый способ, который поддерживается во всех современных браузерах, и в IE8+. В них не обязательно делать таблицу, так как доступно значение display:table-cell . Для элемента с таким display используются те же алгоритмы вычисления ширины и центрирования, что и в TD . И, в том числе, работает vertical-align :

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

Однако у него есть особенность. Вместе с vertical-align родительский блок получает табличный алгоритм вычисления ширины и начинает подстраиваться под содержимое. Это не всегда желательно.

Чтобы его растянуть, нужно указать width явно, например: 300px :

Можно и в процентах, но в примере выше они не сработают, потому что структура таблицы «сломана» – ячейка есть, а собственно таблицы-то нет.

Это можно починить, завернув «псевдоячейку» в элемент с display:table , которому и поставим ширину:

Если дополнительно нужно горизонтальное центрирование – оно обеспечивается другими средствами, например margin: 0 auto для блочных элементов или text-align:center на родителе – для других.

Центрирование в строке с vertical-align

Для инлайновых элементов ( display:inline/inline-block ), включая картинки, свойство vertical-align центрирует сам инлайн-элемент в окружающем его тексте.

В этом случае набор значений несколько другой:

Это можно использовать и для центрирования, если высота родителя известна, а центрируемого элемента – нет.

Допустим, высота внешнего элемента 120px . Укажем её в свойстве line-height :

Работает во всех браузерах и IE8+.

Свойство line-height наследуется, поэтому надо знать «правильную» высоту строки и переопределять её для inner .

Центрирование с vertical-align без таблиц

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

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

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

Для всех современных браузеров и IE8 можно добавить вспомогательный элемент через :before :

В пример выше добавлено также горизонтальное центрирование text-align: center . Но вы можете видеть, что на самом деле внутренний элемент не центрирован горизонтально, он немного сдвинут вправо.

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

Убрать лишний пробел между div и началом inner , будет

Центрирование с использованием модели flexbox

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

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

• Не поддерживается IE9-, IE10 поддерживает предыдущую версию flexbox.

Итого

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

Для горизонтального центрирования:

• text-align: center – центрирует инлайн-элементы в блоке.
• margin: 0 auto – центрирует блок внутри родителя. У блока должна быть указана ширина.

Для вертикального центрирования одного блока внутри другого:

Если размер центрируемого элемента известен, а родителя – нет

Родителю position:relative , потомку position:absolute; top:50% и margin-top:- . Аналогично можно отцентрировать и по горизонтали.

Если нужно отцентрировать одну строку в блоке, высота которого известна

Поставить блоку line-height: . Нужны конкретные единицы высоты ( px , em …). Значение line-height:100% не будет работать, т.к. проценты берутся не от высоты блока, а от текущей line-height .

Высота родителя известна, а центрируемого элемента – нет.

Поставить line-height родителю во всю его высоту, а потомку поставить display:inline-block .

Высота обоих элементов неизвестна.

1. Сделать элемент-родитель ячейкой таблицы при помощи display:table-cell (IE8) или реальной таблицы, и поставить ему vertical-align:middle . Отлично работает, но мы имеем дело с таблицей вместо обычного блока.

1. Решение со вспомогательным элементом outer:before и инлайн-блоками. Вполне универсально и не создаёт таблицу.
2. Решение с использованием flexbox.

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

Начнем с общего описания задачи.

Задача вертикального центрирования

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

Большинство людей, используя свойство text-align: , обращаются к свойству vertical-align для центрирования по вертикали. Все выглядит достаточно логично. Если вы использовали табличные шаблоны, то наверняка активно использовали атрибут valign , который укрепляет веру в то, что vertical-align правильный путь к решению задачи.

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

Значение свойства vertical-align действует по отношению к родительскому строчному элементу.

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

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

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

Метод line-height

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

По умолчанию свободное пространство будет распределено равномерно сверху и снизу текста. И строка будет отцентрирована вертикально. Часто высоту строки делают равной высоте элемента .

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

Центрирование изображения с помощью line-height

А что если содержание представляет собой картинку? Будет ли выше описанный метод работать? Ответ заключается в еще одной строчке кода CSS.

Значение свойства line-height должно быть больше высоты изображения.

Метод таблиц CSS

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

Примечание: Таблица CSS не является тем же, что и HTML таблица.

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

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

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

Абсолютное позиционирование и отрицательные поля

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

В коде примера выполняется одновременное центрирование по горизонтали и вертикали:

Сначала устанавливаем тип позиционирования элементов. Затем для вложенного элемента div устанавливаем значения свойств top и left равными 50%, что соответствует центру родительского элемента. Но в центр попадает левый верхний угол вложенного элемента. Поэтому нужно поднять его вверх (на половину высоты) и сдвинуть влево (на половину ширины), и тогда центр совпадет с центром родительского элемента. Так что знание высоты элемента в данном случае необходимо. Затем задаем элементу отрицательные значения верхнего и левого полей равными половине высоты и ширины соответственно.

Данный метод работает не во всех браузерах.

Абсолютное позиционирование и растягивание

В коде примера выполняется центрирование по вертикали и горизонтали.

Идея данного метода заключается в том, чтобы растянуть вложенный элемент до всех 4 границ родительского элемента с помощью установки свойствам top, bottom, right, и left значения 0.

Установка автоматического формирования полей по всем сторонам приведет к заданию равных значений по всем 4 сторонам и выведет наш вложенный элемент div по центру родительского элемента.

К сожалению, данный метод не работает в IE7 и ниже.

Равные отступы сверху и снизу

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

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

Для динамического изменения размеров элементов используются относительные единицы измерения. А для абсолютных единиц измерения придется проделать расчеты.

Например, если родительский элемент имеет высоту 400 px, а вложенный элемент — 100px, то необходимы отступы 150px сверху и снизу.

150 + 150 + 100 = 400

Использование % позволяет расчеты оставить браузеру.

Данный метод работает везде. Обратной стороной является необходимость в расчетах.

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

Плавающий div

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

Мы смещаем пустой div влево или вправо и задаем для него высоту 50% родительского элемента. Таким образом, он будет заполнять верхнюю половину родительского элемента.

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

Верхняя граница вложенного элемента div находится непосредственно под нижней границей пустого элемента div . Нам нужно сместить вложенный элемент вверх на половину высоты плавающего пустого элемента. Для решения задачи используется отрицательное значение свойства margin-bottom для плавающего пустого элемента div .

Данный метод также работает во всех браузерах. Однако его использование требует дополнительного пустого элемента div и знаний о высоте вложенного элемента.

Заключение

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.vanseodesign.com/css/vertical-centering/
Перевел: Сергей Фастунов
Урок создан: 21 Сентября 2011
Просмотров: 569238
Правила перепечатки

5 последних уроков рубрики «CSS»

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

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

Раскрывающаяся навигация

Экспериментальный скрипт раскрывающейся навигации.

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

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

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

Навигация по статье:

Свойство для вертикального выравнивания vertical-align

Базовым свойством, которое позволяет сделать в CSS выравнивание по вертикали является vertical-align.

В основном для выравнивания текста по вертикали css вам понадобятся значения top, middle, bottom. Они подходят для большинства случаев.

Так, в случае если нам нужно выровнять текст в каком-то блоке, то для начала оборачиваем его в тег

и задаем для него стиль vertical-align:middle;

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

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

Рекомендуем к прочтению

Выравнивание блоков с помощью css с использованием flex контейнера

С развитием Интернет технологий, в том числе и HTML и CSS, для разработчиков постоянно открываются новые возможности по созданию сайтов. Одной из проблем остается наличие устаревших версий браузеров. В основном это касается Internet Explorer, особенно у тех, кто использует windows xp.

Перед верстальщиком Интернет страниц часто возникает задача выравнивания блоков css на странице. Например, можно расположить все блоки один за другим, горизонтально, расположить их по центру или снизу контейнера и т.д. С появлением параметра свойства display — flex эта задача значительно упрощается. Эта технология разработана таким образом, чтобы компоновать дочерние элементы, то есть элементы внутри блока или контейнера. Параметров этой компоновки более чем достаточно.

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

 .container {
    width:450px;
    height:250px;
    border: 1px solid #000000;
    display: flex;
    flex-wrap: wrap;
    align-content:stretch;
   }

Основное свойство — display: flex. Для того, чтобы дочерние элементы размещались в несколько строк добавляем свойство — flex-wrap: wrap.

А как раз свойство align-content указывает на то, как должны располагаться и выравниваться блоки css. Параметр stretch позволяет блокам равномерно расположиться в контейнере. При этом их высота может подбираться автоматически. Как это выглядит. Добавим css для внутренних блоков.

.container div {
    width: 50px;
    background: green;
    margin:5px;
   }

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

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

Результат работы кода на рисунке.

Что же получиться, если указать еще высоту блоков:

.container div {
    width: 50px;
    height: 50px;
    background: green;
    margin:5px;
   }

Теперь уберем высоту и сделаем ширину блоков равной 100%

.container div {
    width: 100%;
    background: green;
    margin:5px;
   }

Получаем.

Еще одним параметром align-content является center и повзволяет выровнять все блоки по центру.

CSS код:

.container {
    width:450px;
    height:250px;
    border: 1px solid #000000;
    display: flex;
    flex-wrap: wrap;
    align-content:center;
   }
   .container div {
    width: 50px;
    height:50px;
    background: green;
    margin:5px;
   }

Результат:

Другой параметр flex-end свойства align-content позволит расположить блоки снизу контейнера.

.container {
    width:450px;
    height:250px;
    border: 1px solid #000000;
    display: flex;
    flex-wrap: wrap;
    align-content:flex-end;
   }

Параметр flex-start сделает все с точностью до наоборот.

.container {
    width:450px;
    height:250px;
    border: 1px solid #000000;
    display: flex;
    flex-wrap: wrap;
    align-content:flex-start;
   }

Еще один параметр свойства align-content, создать результаты которого без использования контейнера flex будет нелегко — это space-between. Свойство располагает первую линию вверху, а вторую снизу, создавая между ними пустое пространство (space).

Часть CSS кода:

.container {
    width:450px;
    height:250px;
    border: 1px solid #000000;
    display: flex;
    flex-wrap: wrap;
    align-content:space-between;
   }

Результат:

Свойство space-around добавляет пустое пространство сверху и снизу. Причем каждое из них равно половине пустого пространтсва по центру.

.container {
    width:450px;
    height:250px;
    border: 1px solid #000000;
    display: flex;
    flex-wrap: wrap;
    align-content:space-around;
   }

Итак свойство css align-content имеет множество параметров: stretch, flex-start, flex-end, center, space-between, space-around.

Как видно из примеров выше, изменяя один параметр свойства css align-content мы совершенно по разному используем выравнивание блоков css при помощи технологии flex. Данный код не работает в Internet Explorer до 10 версии включительно.

Выравнивание текста и блоков в CSS. Выравнивание по центру

Текст

Свойство text-align производит горизонтальное выравнивание текста внутри элемента. При этом сам элемент не перемещается.

text-align: left — по левому краю (значение по умолчанию)

text-align: right — по правому краю

text-align: center — по центру элемента

text-align: justify — по ширине

Пример:

Стиль:

+

div
  {
  border: 1px solid Red;
  }

HTML код:

<div>Текст справа</div>

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

Ячейки таблицы

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

vertical-align: middle — по центру (значение по умолчанию)

vertical-align: top — по верхнему краю

vertical-align: bottom — по нижнему краю

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

Стиль:

td
  {
  border: 1px solid Red;
  width: 200px;
  height: 180px;
  }

HTML код:

<table>
  <tr>
    <td>Текст</td>
    <td>Текст</td>
</tr></table>

Блоки

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

<div>Блок с отступом</div>

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

Стиль:

#tocenter
  {
  width: 170px;
  margin-left: auto;
  margin-right: auto;
  }

HTML код:

<div>Блок в центре</div>