Выравнивание css элемента – Выравнивание содержимого в ячейках — Знакомство с таблицами — HTML Academy

Все про CSS выравнивание

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

Выравнивание блоков с известными размерами

Проще всего с помощью CSS выровнять блоки, у которых заранее известна высота (для выравнивания по вертикали) или ширина (для горизонтального выравнивания).

Выравнивание при помощи padding

Иногда можно не центрировать элемент, а добавить ему границы свойством «padding«.

Например, есть картинка 200 на 200 пикселей, и требуется центрировать ее в блоке 240 на 300. Можем задать высоту и ширину внешнему блоку = 200px, и добавить по 20 пикселей сверху и снизу, и по 50 слева и справа. 

.example-wrapper1{
background: #535E73;
width: 200px;
height: 200px;
padding: 20px 50px;
}

Выравнивание абсолютно позиционированных блоков

Если для блока задано «position: absolute«, тогда его можно позиционировать относительно ближайшего родителя с «position: relative». Для этого нужно всем свойствам («top«,»right«,»bottom«,»left«) внутреннего блока присвоить одинаковое значение, а также «margin: auto».

*Есть нюанс: Ширина (высота) внутреннего блока + значение left (right, bottom, top) не должны превышать размеры родительского блока. Надежнее свойствам left (right, bottom, top) присваивать 0 (ноль). 

.example-wrapper2{
position: relative;
height: 250px;
background: url(space.jpg);
}

.cat-king{
width: 200px;
height: 200px;    
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
background: url(king.png);
}

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

Выравнивание посредством «text-align: center»

Для выравнивания текста в блоке есть специальное свойство «text-align«. При установленном значении «center» каждая строка текста выровняется по горизонтали. Для многострочного текста такое решение используется крайне редко, чаще этот вариант можно встретить для выравнивания span-ов, ссылок или картинок.

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

.example-text{
text-align: center;
padding: 10px;
background: #FF90B8;
}

Стоит заметить, что это свойство будет работать не только для текста, но и для любых строчных элементов («display: inline»).

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

.example-wrapper3{
text-align: center;
background: #FF90B8;
}

.inline-text{
display: inline-block;
width: 40%;
padding: 10px;
text-align: left;
background: #FFE5E5;
}

Выравнивание блоков при помощи margin

Блочные элементы с известной шириной легко выравниваются по горизонтали, если установить им «margin-left: auto; margin-right: auto». Обычно используется сокращенная запись: «margin: 0 auto» (вместо ноля может быть любое значение). Но вот для выравнивания по вертикали такой способ не подойдет.

.lama-wrapper{
height: 200px;
background: #F1BF88;
}

.lama1{
height: 200px;
width: 200px;
background: url(lama.jpg);
margin: 0 auto;
}

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

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

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

Выравнивание свойством line-height

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

Это фиолетовая строчка, высота которой равна высоте блока.

.example-wrapper4{
line-height: 100px;
color: #DC09C0;
background: #E5DAE1;
height: 100px;
text-align: center;
}

Так же возможно добиться выравнивания блока с несколькими строками. Для этого придется использовать дополнительный блок-обертку, и устанавливать высоту строки ему. Внутренний блок может быть многострочным, но обязательно «inline». К нему нужно применить «vertical-align: middle».

А это inline-элемент. Здесь несколько оранжевых
строчек. Они выравниваятся
за счет установленной высоты строки блока-родителя.

.example-wrapper5 {
line-height: 160px;
height: 160px;
font-size: 0;
background: #FF9B00;
}

.example-wrapper5 .text1{
display: inline-block;
font-size: 14px;
line-height: 1.5;
vertical-align: middle;
background: #FFFAF2;
color: #FF9B00;
text-align: center;
}

У блока обертки должно быть установлено «font-size: 0». Если не установить нулевой размер шрифта, то браузер добавит от себя несколько лишних пикселей. Также придется указать размер шрифта и высоту строки для внутреннего блока, ведь эти свойства наследуются от родителя.

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

Свойство «vertical-align» также действует на ячейки таблицы. C установленным значением «middle», контент внутри ячейки выравнивается по центру. Конечно, табличная верстка в наше время считается архаической, но в исключительных случаях можно симулировать ее, указав «display: table-cell«.

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

 

.one_product .img_wrapper {
display: table-cell;
height: 169px;
vertical-align: middle;
overflow: hidden;
background: #fff;
width: 255px;
}

.one_product img {
max-height: 169px;
max-width: 100%;
min-width: 140px;
display: block;
margin: 0 auto;
}

Следует помнить, что если у элемента установлено «float» отличное от «none», то он в любом случае будет блочным (display: block) — тогда придется использовать дополнительный блок-обертку.

Выравнивание дополнительным inline-элементом

И для inline-элементов можно применить «vertical-align: middle«. При этом все элементы с «display: inline«, которые находятся в одной строке, выровняются относительно общей центральной линии.

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

.example-wrapper6{
height: 300px;
text-align: center;
background: #70DAF1;
}


.pudge {
display: inline-block;
vertical-align: middle;
background: url(pudge.png);
background-color: #fff;
width: 200px;
height: 200px;
}


.riki { 
display: inline-block;
height: 100%;
vertical-align: middle;
}

Display: flex и выравнивание

Если Вас не сильно заботят пользователи Explorer 8 или заботят так сильно, что Вы готовы ради них вставить кусок лишнего javascript-a, то можно применять «display: flex». Flex-блоки отлично справляются с проблемами выравнивания, и достаточно написать «margin: auto» для центрирования контента внутри.

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

.example-wrapper7{
display: flex; 
height: 300px;  
background: #AEB96A;
}

.example-wrapper7 img{
margin: auto;
}

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

CSS вертикальное выравнивание для всех

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

Но не бойтесь: если вы уже боретесь с CSS вертикальным выравниванием — вы обратились по адресу.

Когда я только начинал работать в области веб-разработки, то немного помучился с этим свойством. Я думал, что оно должно работать, как классическое свойство “text-align”. Ах, если бы все было так просто…

CSS свойство vertical-align отлично работает с таблицами, но не с div или другими элементами. Когда вы используете его для div, то оно выравнивает элемент относительно других блоков, но не его содержимое. При этом свойство работает только с display: inline-block;.

Посмотрите пример

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

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

Взгляните на этот пример

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

Чтобы это работало, должен быть родительский контейнер с display: table, а внутри него – нужное количество столбцов, которое вы хотите центрировать с помощью display: table-cell и vertical-align: middle.

Посмотрите пример

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

Начнем с основ выравнивания по вертикали CSS div:

• position: static — это значение по умолчанию. Элемент отображается в соответствии с порядком HTML;
• position: absolute — используется, чтобы определить точное положение элемента. Эта позиция всегда связана с ближайшим относительно позиционированным родительским элементом (не static). Если не определить точное положение элемента, вы потеряете контроль над ним. Он отобразится случайно, полностью игнорируя поток документа. По умолчанию элемент отображается в левом верхнем углу;
• position: relative — используется для позиционирования элемента относительно его нормального положения (статического). Это значение сохраняет порядок потока документа;
• position: fixed — используется для позиционирования элемента относительно окна браузера, поэтому он всегда отображается в области просмотра.

Примечание: некоторые свойства (top и z-index) работают только в том случае, если для элемента задано значение position (не static).

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

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

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

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

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

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

Посмотреть пример

Используя flexbox расположение, можно центрировать несколько блоков.

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

Изучение CSS разметки

FlexBox Froggy

Полное руководство по flexbox

Песочница flexbox

Данная публикация представляет собой перевод статьи «CSS Vertical Align for Everyone (Dummies Included)» , подготовленной дружной командой проекта Интернет-технологии.ру

Способы вертикального выравнивания по центру в CSS.

Способы вертикального выравнивания по центру в CSS.

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

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

1-ый способ

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

<div>
	<div>
		<div>
			Некоторая полезная информация, которая должна располагаться по центру.
		</div>
	</div>
</div>

#wrapper{
	display		: table;
}
#cell{
	display		: table-cell;
	vertical-align	: middle;
}

Плюсы

• Контент может динамически изменять высоту (высота не определена в CSS).
• Контент не обрезается в случае, если для него недостаточно места.

Минусы

• Не работает в IE 7 и меньше
• Много вложенных тэгов

2-ой метод

Этот метод использует абсолютное позиционирование div-а, которому top устанавливается в 50%, а верхний отступ (margin-top) минус половине высоты контента. Это подразумевает, что объект должен иметь фиксированную высоту, которая определена в стилях CSS.

Поскольку высота фиксированная, вы можете установить overflow:auto; для div-а содержащего контент, таким образом, в случае если контент не будет влазить, то появятся скролл-бары.

<div>
	Content Here		
</div>

#content {
	position	: absolute;
	top		: 50%;
	height		: 240px;
	margin-top	: -120px; /* минус от половины высоты */
}

Плюсы

• Работает во всех броузерах.
• Нет лишней вложенности.

Минусы

• Когда не достаточно места, контент пропадает (например, div находится внутри body, а пользователь уменьшил окна, в этом случае скролл-бары не появятся.

3-ий метод

В этом методе, мы обернём div с контентом другим div-ом. Установим ему высоту в 50% (height: 50%;), а нижний отступ половине высоты (margin-bottom:-contentheight;). Контент будет очищать float и выводиться по центру.

<div>
	<div>
	здесь контент
	</div>
</div>

#floater{
	float		: left;
	height		: 50%;
	margin-bottom	: -120px;
}
#content{
	clear		: both;
	height		: 240px;
	position	: relative;
}

Плюсы

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

Минусы

• Думаю только один: что используется лишний пустой элемент.

4-ый метод.

Этот метод использует свойство position:absolute; для div-а с фиксированными размерами (шириной и высотой). Затем устанавливаем ему координаты top:0; bottom:0;, но поскольку у него фиксированная высота, то он не может растянуться и выравнивается по центру. Это очень похоже на общеизвестный метод горизонтального выравнивания по центру блочного элемента фиксированной ширины (margin: 0 auto;).

<div>
	Важная информация.
</div>

#content{
	position	: absolute;
	top		: 0;
	bottom		: 0;
	left		: 0;
	right		: 0;
	margin		: auto;
	height		: 240px;
	width		: 70%;
}

Плюсы

Минусы

• Не работает в Internet Explorer
• Контент будет обрезаться без скролл-баров, если не хватает места в контейнере.

5-ый метод

С помощью этого метода можно выровнять по центру одну строку текста. Просто устанавливаем высоту текста (line-height) равной высоте элемента (height). После этого строка будет выведена по центру.

<div>
	Какая-то строка текста
</div>

#content{
	height		: 100px;
	line-height	: 100px;
}

Плюсы

• Работает во всех броузерах.
• Не обрезает текст, если он не влез.

Минусы

• Работает только с текстом (не работает с блочными элементами).
• Если текста больше чем одна строка, то выглядит очень плохо.

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

Теперь вы знаете как добиться вертикального выравнивания по центру, давайте сделаем простой web-сайт, который, в конце-концов будет выглядеть так:

Шаг 1

Всегда хорошо начинать с семантической разметки. Наша страница будет структурирована следующим образом:

• #floater (чтобы выровнять контент по центру)
• #centred (центральный элемент)
  • #side
    • #logo
    • #nav (список <ul>)
  • #content
• #bottom (для копирайтов и всего такого)

Напишем следующую html-разметку:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>A Centred Company</title>
	<link rel="stylesheet" href="styles.css" type="text/css" media="all" />
</head>
 
<body>
	<div></div>
	<div>
 		<div>
			<div><strong><span>A</span> Company</strong></div>
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">Products</a></li>
				<li><a href="#">Blog</a></li>
				<li><a href="#">Contact</a></li>
				<li><a href="#">About</a></li>
			</ul>
		</div>
 		<div>
 			<h2>Page Title</h2>
 			<p>
				Holisticly re-engineer value-added outsourcing after
				process-centric collaboration and idea-sharing. 
				Energistically simplify impactful niche markets via 
				enabled imperatives. Holisticly predominate premium 
				innovation after compelling scenarios. Seamlessly 
				recaptiualize high standards in human capital with 
				leading-edge manufactured products. Distinctively 
				syndicate standards compliant schemas before robust 
				vortals. Uniquely recaptiualize leveraged web-readiness 
				vis-a-vis out-of-the-box information. 
			</p>
 			<h3>Heading 2</h3>
 			<p>
				Efficiently embrace customized web-readiness rather 
				than customer directed processes. Assertively grow 
				cross-platform imperatives vis-a-vis proactive 
				technologies. Conveniently empower multidisciplinary 
				meta-services without enterprise-wide interfaces. 
				Conveniently streamline competitive strategic theme 
				areas with focused e-markets. Phosfluorescently 
				syndicate world-class communities vis-a-vis value-added 
				markets. Appropriately reinvent holistic services 
				before robust e-services. 
			</p>
 		</div>
 	</div>
 	<div>
		<p>
			Copyright notice goes here
		</p>
	</div>
</body>
</html>

Шаг 2

Сейчас мы напишем простейший CSS, для размещения элементов на странице. Вы должны сохранить этот код в файле style.css. Именно на него прописана ссылка в html-файле.

html, body {
	margin		: 0;
	padding		: 0;
	height		: 100%;
}
body {
	background	: url('page_bg.jpg') 50% 50% no-repeat #FC3;
	font-family	: Georgia, Times, serifs;
}
#floater {
	position	: relative;
	float		: left;
	height		: 50%;
	margin-bottom	: -200px;
	width		: 1px;
}
#centered {
	position	: relative;
	clear		: left;
	height		: 400px;
	width		: 80%;
	max-width	: 800px;
	min-width	: 400px;
	margin		: 0 auto;
	background	: #fff;
	border		: 4px solid #666;
}
#bottom {
	position	: absolute;
	bottom		: 0;
	right		: 0;
}
#nav {
	position	: absolute;
	left		: 0;
	top		: 0;
	bottom		: 0;
	right		: 70%;
	padding		: 20px;
	margin		: 10px;
}
#content {
	position	: absolute;
	left		: 30%;
	right		: 0;
	top		: 0;
	bottom		: 0;
	overflow	: auto;
	height		: 340px;
	padding		: 20px;
	margin		: 10px;
}

Перед тем как сделать наш контент выровненным по центру, необходимо для body и html установить высоту 100%. Так как высота считается без внутренних и внешних отступов (padding и margin), то мы устанавливаем их (отступы) в 0, чтобы не было скроллбаров.

Нижний отступ для элемента «floater»-а равен минус половине высоты контента (400px), а именно -200px;

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

Ширина элемента #centered 80%. Это делает наш сайт уже на маленьких экранах и шире на больших. большинство сайтов выглядит неприлично на новых широких мониторах в верхнем левом углу. Свойства min-width и max-width также ограничивают нашу страничку, чтобы она не выглядела слишком широкой или слишком узкой. Internet Explorer не поддерживает эти свойства. Для него надо установить фиксированную ширину.

Поскольку элементу #centered установлено position:relative, мы можем использовать абсолютное позиционирование элементов внутри него. Затем установим overflow:auto; для элемента #content, чтобы появлялись скроллбары, в случае если не будет помещаться контент.

Шаг 3

И последнее что мы сделаем, это добавим кое-какие стили, чтобы страничка выглядела немного привлекательнее. Давайте начнём с меню.

#nav ul {
	list-style		: none;
	padding			: 0;
	margin			: 20px 0 0 0;
	text-indent		: 0;
}
#nav li {
	padding			: 0;
	margin			: 3px;
}
#nav li a {
	display			: block;
	background-color	: #e8e8e8;
	padding			: 7px;
	margin			: 0;
	text-decoration		: none;
	color			: #000;
	border-bottom		: 1px solid #bbb;
	text-align		: right;
}
#nav li a::after {
	content			: '»';
	color			: #aaa;
	font-weight		: bold;
	display			: inline;
	float			: right;
	margin			: 0 2px 0 5px;
}
#nav li a:hover, #nav li a:focus {
	background		: #f8f8f8;
	border-bottom-color	: #777;
}
#nav li a:hover::after {
	margin			: 0 0 0 7px;
	color			: #f93;
}
#nav li a:active {
	padding			: 8px 7px 6px 7px;
}

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

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

Другая интересная вещь, которую мы использовали для меню — это псевдо-классы :before и :after. Они позволяют вам добавить что-нибудь перед и после элемента. Это хороший способ добавлять иконки или символы, такие как стрелочка в конце каждой ссылки. Такой трюк не работает в Internet Explorer 7 и ниже.

Шаг 4

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

#centered {
	-webkit-border-radius	: 8px;
	-moz-border-radius	: 8px;
	border-radius		: 8px;
}
h2, h3, h4, h5, h5, h6 {
	font-family		: Helvetica, Arial, sans-serif;
	font-weight		: normal;
	color			: #666;
}
h2 {
	color			: #f93;
	border-bottom		: 1px solid #ddd;
	letter-spacing		: -0.05em;
	font-weight		: bold;
	margin-top		: 0;
	padding-top		: 0;
}
#bottom {
	padding			: 10px;
	font-size		: 0.7em;
	color			: #f03;
}
#logo {
	font-size		: 2em;
	text-align		: center;
	color			: #999;
}
#logo strong {
	font-weight		: normal;
}
#logo span {
	display			: block;
	font-size		: 4em;
	line-height		: 0.7em;
	color			: #666;
}
p, h3, h4 {
	line-height		: 1.6em;
}
a {
	color			: #f03;
}

В этих стилях мы устанавливаем закруглённые углы для элемента #centered. В CSS3, за это будет отвечать свойство border-radius. Это пока что не реализовано некоторыми броузерами, разве только использовать приставки -moz и -webkit для Mozilla Firefox и Safari/Webkit.

Совместимость

Как вы уже наверное предположили, основной источник проблем совместимости — Internet Explorer:

• Элементу #floater обязательно надо установить ширину
• В IE 6 лишние отступы вокруг меню

Результат.

по центру, по вертикали, выравнивание текста

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

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

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

<div id = «wrapper»> <div id = «header»></div> </div>

<div id = «wrapper»> <div id = «header»></div> </div>

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

#header{ width/max-width: 800px; margin: 0 auto; }

#header{ width/max-width: 800px; margin: 0 auto; }

Нам нужно указать точную или максимальную ширину, после чего записать ключевое свойство – margin: 0 auto. Оно задает внешние отступы нашей шапке, первое значение определяет отступы сверху и снизу, а второе – справа и слева. Значение auto дает команду браузеру автоматически рассчитать отступы с обеих сторон так, чтобы элемент был ровно по центру родительского. Удобно!

Выравнивание текста

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

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

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

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

div{ background: #ccc; padding: 30px 0; }

div{ background: #ccc; padding: 30px 0; }

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

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

div{ height: 60px; line-height: 60px; }

div{ height: 60px; line-height: 60px; }

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

div{ display: table-cell; vertical-align: middle; }

div{ display: table-cell; vertical-align: middle; }

Этот способ хорош тем, что вы сможете выровнять сколько угодно текста по центру. Но блоку, в который вложен наш div лучше прописать display: table, иначе может не работать.

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

Задать отступы в процентах. Если вы знаете высоту родительского элемента и помещаете в него еще один блочный элемент, то отцентрировать его можно с помощью процентных отступов. Например, родитель имеет высоту 600 пикселей. Вы помещаете в него блок, который имеет высоту 300 пикселей. Сколько вам нужно отступить сверху и снизу, чтобы отцентрировать его? По 150 пикселей, а это 25% от высоты родителя.

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

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

А если вдобавок к этому записать еще и margin: 0 auto, то элемент и по горизонтали станет в центр!

Использовать абсолютное позиционирование. Об этом способе мало кто знает. Нужно вставить в css такой код:

position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; max-width: 100%; max-height: 100%;

position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; max-width: 100%; max-height: 100%;

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

Использовать флексбокс. Самый современный метод! Для этого контейнеру нужно записать в стили свойство display: flex, а его вложенному блоку – margin: auto. Элемент будет выровнен по центру, причем и по горизонтали, и по вертикали.

Если вам нужно выравнивание только по вертикали, то можно записать, например, так: margin: auto 0.

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

vertical-align | htmlbook.ru

Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	8.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

Краткая информация

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

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

Синтаксис

vertical-align: baseline|bottom|middle|sub|super|text-bottom|text-top|top|inherit | значение | проценты

Значения

baseline

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

bottom

Выравнивает основание текущего элемента по нижней части элемента строки, расположенного ниже всех.

middle

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

sub

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

super

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

text-bottom

Нижняя граница элемента выравнивается по самому нижнему краю текущей строки.

text-top

Верхняя граница элемента выравнивается по самому высокому текстовому элементу текущей строки.

top

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

inherit

Наследует значение родителя.

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

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

baseline

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

bottom

Выравнивает по нижнему краю ячейки.

middle

Выравнивает по середине ячейки.

top

Выравнивает содержимое ячейки по ее верхнему краю.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>vertical-align</title>
 </head>
 <body>
  <div>
  T<span>E</span>X и L<span 
 >A</span>T<span 
 >E</span>X
  </div>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства vertical-align

Объектная модель

[window.]document.getElementById(«elementID»).style.verticalAlign

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Выравнивание элементов в CSS // Вебшкола онлайн



---

---

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

---

Выравнивание блочных элементов

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

Примеры блочных элементов

Узнать, как выравнивать текст вы можете в главе CSS текст.

В этой главе вы узнаете, как выравнивать блочные элементы по горизонтали.

---

Выравнивание по центру с использованием свойства margin

Блочные элементы можно выровнять по центру, если задать свойствам margin-left (внешний отступ слева) и margin-right (внешний отступ справа) значение «auto».

Заметка: в Internet Explorer значение «auto» для свойства margin будет работать только если указан !DOCTYPE.

Если вы задаете отступам слева и справа значение «auto», браузер автоматически вычисляет доступное пространство по бокам блока и задает одинаковые отступы справа и слева. Вот результат центрирования элемента:

Пример

.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}

Посмотреть

Совет: выравнивание этим методом не будет работать, если ширина блочного элемента равна 100%.

Заметка: в IE5 этот прием не работает без дополнительных строк кода. Вам нужно поместить выравниваемый блок в элемент div, для которого надо задать text-align:center.

---

Выравнивание справа/слева с помощью position

Одним из способов выравнивания справа/слева является абсолютное позиционирование:

Пример

.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

Посмотреть

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

---

Заметки о кросс-браузерности

Если вы используете способ выравнивания, описанный выше, будет нелишним точно задать значения margin и padding элемента <body>. Это позволит избежать различий в отображении результата в различных браузерах.

Кроме того, в нашем «любимом» браузере IE существует проблема, проявляющаяся при использовании свойства position. Если содержащий элемент (обычно это <div> с классом «container» или «wrap» (обертка)) имеет явно заданную ширину, при том, что не указан !DOCTYPE, IE добавляет справа отступ в 17px. Предположительно это место зарезервировано под полосу прокрутки. Поэтому, при использовании свойства position в целях выравнивания, не забывайте указывать !DOCTYPE:

Пример

body
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%;
}
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

Посмотреть

---

Выравнивание справа/слева с помощью свойства float

Еще одним способом выравнивания элементов по горизонтали является использование свойства float:

Пример

.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

Посмотреть

---

Заметки о кросс-браузерности

Если вы используете способ выравнивания, описанный выше, будет нелишним точно задать значения margin и padding элемента <body>. Это позволит избежать различий в отображении результата в различных браузерах.

Кроме того, в нашем «любимом» браузере IE существует проблема, проявляющаяся при использовании свойства float. Если для документа не указан !DOCTYPE, IE добавляет справа отступ в 17px. Предположительно это место зарезервировано под полосу прокрутки. Поэтому, при использовании свойства float в целях выравнивания, не забывайте указывать !DOCTYPE:

Пример

body
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}

Посмотреть



Понравилась запись? Сказать «Спасибо» очень просто, поделитесь записью в социальных сетях!

---

---

Выравнивание блоков div по центру (css, div html). — deadblog.ru

Выравнивание блоков div по центру (css, div html).

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

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

И да, стоит сразу сказать, что данные способы могут не работать в ie6, или чём-то подобном. Я даже не обращаю внимание на данный браузер, не смотря на то, сколько людей им пользуется. Пора бы уже отучивать пользоваться старьём.

Итак, что мы имеем?

Способ 1. Самый крутой

margin:0 auto;

Очень эффективный метод, который к тому-же позволяет выровнять отступы сверху и снизу. В чём фишка метода? Всё просто до безумия. Мы имеем блок с определённой шириной (в пикселях, либо процентах), которому с помощью свойства «auto» задаём одинаковый отступ справа и слева, в итоге получаем div-блок по центру. Первое значение (0 в примере) — это отступ сверху и снизу.

К примеру, для выравнивания сверху пишем:

margin:10px auto;

Для выравнивания сверху и снизу:

margin:10px auto 5px;

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

Способ 2. Процентный

Если блок имеет ширину в процентах, то мы можем выровнять div по центру применяя равные отступы, чтобы добить полную ширину до 100%. Кто не понял, покажу на примере, так проще:

Имеем блок шириной 50%, чтобы выровнять его по центру, нам нужно боковые отступы сделать по 25% справа и слева соответственно. Смотрим код:

#test2 {
  margin:0 25% 0 25%;
  width:50%;
}

Не напрягаясь, получаем блок по центру, выровненный банальной математикой (50 + 25 + 25) 🙂

Способ 3. Смешанный

Данный способ посоветовал в комментариях sman.

#test3 {
  left: 50%;
  margin-left: -500px;
  position: absolute;
  width: 1000px;
}

Как я упоминал в начале статьи, способов выровнять блок по центру огромное множество. Каждый выбирCgает тот, который ему больше по душе. Жду комментариев и новых способов 🙂

Способ 4. Использование дополнительного блока

Способ предложил Виктор в комментариях:

Ни один метод не решает проблему с float внутри блока, если ширина блока заведомо не известна (например, меню).

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

#dop-block {
  position: relative;
  float: right;
  right: 50%;
}
#block {
  position: relative;
  float: left;
  left: 50%;
}