выравнивание текста в CSS Как создать свой сайт > Вебмастеру > Создание своего сайта > Вертикальное выравнивание текста в CSS

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

Я предпочитаю ездить медленно,
чтобы иметь возможность увидеть то, мимо чего проезжаешь.
«Экспансия 1», Юлиан Семёнов.
9 декабря 2007

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


    Чтобы точно понять, о чём идёт речь, для примера сделал следующее меню:

HTML:

<ul id="navbar">
	<li><a href="[link]">Главная</a></li>
	<li><a href="[link]">Новости</a></li>
	<li><a href="[link]">Галерея</a></li>
	<li><a href="[link]">Гостевая</a></li>
	<li><a href="[link]">Контакты</a></li>
</ul>

CSS:

ul#navbar {
	margin: 0;
	padding: 0;
	font-size: 0.75em;
	font-family: Tahoma;
	text-transform: uppercase;
	background: #C8BAA4;
	line-height: 30px;
	height: 30px;
}
ul#navbar a {
	color: #fff;
	text-decoration: none;
}
ul#navbar a:hover {
	text-decoration: underline;
}
ul#navbar li {
	list-style: none;
	float: left;
	padding: 0 13px;
	border-right: 1px solid #fff;
	height: 30px;
}

    Всё хорошо, но в браузере FireFox сочетание клавиш Ctrl+Plus, например, увеличивает размер шрифта, что приводит к съезжанию текста.

    Всё дело в том, что при масштабировании размера шрифта вместе с ним изменяется и высота строки (line-height). Настал момент вспомнить, что IE не масштабирует величины, заданные в пикселах.

ul#navbar {
	...
	...
	...
	line-height: 30px;
	height: 30px;
}

    Так как высота строки задана в пикселах, то изменение шрифта её не затронет, и текст в IE не станет смещаться вниз или вверх из-за увеличения или уменьшения шрифта.

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

ul#navbar {
	display: table;
}
ul#navbar li {
	float: none;
	display: table-cell;
	vertical-align: middle;
	line-height: 1;
}

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

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

/* Internet Explorer 7 */
*:first-child+html ul#navbar {
	display: block;
}
*:first-child+html ul#navbar li {
	float: left;
	display: block;          // Не обязательно, так как [float: left;] это уже подразумевает.
	line-height: 30px;
	height: 30px;
}
 
/* То же самое для старших IE */
* html ul#navbar {
	display: block;
}
* html ul#navbar li {
	float: left;
	display: block;
	line-height: 30px;
	height: 30px;
}

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

HTML:

<div id="navbg">
	<ul id="navbar">
		<li><a href="[link]">Главная</a></li>
		<li><a href="[link]">Новости</a></li>
		<li><a href="[link]">Галерея</a></li>
		<li><a href="[link]">Гостевая</a></li>
		<li><a href="[link]">Контакты</a></li>
	</ul>
</div>

CSS:

#navbg {
	background: #C8BAA4;
}

    В заключение хочу отметить, что последнюю конструкцию логичнее записать так:

<div id="navbar">        /* вместо <div id="navbg"> */
	<ul>             /* вместо <ul id="navbar"> */
		...
	</ul>
</div>

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

    Итак, весь код полностью:

<style type="text/css">
#navbg {
	background: #C8BAA4;
}
ul#navbar {
	margin: 0;
	padding: 0;
	font-size: 0.75em;
	font-family: Tahoma;
	text-transform: uppercase;
	background: #C8BAA4;
	height: 30px;
}
ul#navbar a {
	color: #fff;
	text-decoration: none;
}
ul#navbar a:hover {
	text-decoration: underline;
}
ul#navbar li {
	list-style: none;
	padding: 0 13px;
	border-right: 1px solid #fff;
}
 
/* Большинство браузеров */
ul#navbar {
	display: table;
}
ul#navbar li {
	float: none;
	display: table-cell;
	vertical-align: middle;
	line-height: 1;
}
 
/* Internet Explorer 7 */
*:first-child+html ul#navbar {
	display: block;
}
*:first-child+html ul#navbar li {
	float: left;
	display: block;          // Не обязательно, так как [float: left;] это уже подразумевает.
	line-height: 30px;
	height: 30px;
}
 
/* IE 6 and below */
* html ul#navbar {
	display: block;
}
* html ul#navbar li {
	float: left;
	display: block;
	line-height: 30px;
	height: 30px;
}
</style>
 
<div id="navbg">
	<ul id="navbar">
		<li><a href="[link]">Главная</a></li>
		<li><a href="[link]">Новости</a></li>
		<li><a href="[link]">Галерея</a></li>
		<li><a href="[link]">Гостевая</a></li>
		<li><a href="[link]">Контакты</a></li>
	</ul>
</div>

Автор: Никита Мосияш.

Комментарии:


⇓ 

Поделись ссылкой на Seoded.ru с друзьями, знакомыми и собеседниками в соцсетях и на форумах! А сам сайт добавь в закладки! Так победим.

Поделиться ссылкой на эту страницу в:

Полезные ссылки:

Как туристу заработать на авиабилетах Как в Интернете заработать фотографам, художникам...

Ещё материалы по этой теме:

Формирование массива PHP-генератор паролей CSS-свойство «!important» Масштабные тонкости Шаманство с покупкой сайтов
основан в 2008 г. © Все права на материалы сайта Seoded.ru принадлежат Алексею Вострову.
Копирование (полное или частичное) любых материалов сайта возможно только с разрешения автора и при указании ссылки на источник.
Ослушавшихся находит и забирает Бабайка!