Вертикальное выравнивание по центру li a текста

[Fedcomp]

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

Задача :

Сделать на тулбаре список ссылок-кнопок. Чтобы не быть пустомелей вот скрин

(Стрелка на скриншоте заменяет курсор потерянный при printscreen)

Причем чтобы при наведении курсором эта область затемнялась (как на скриншоте)

Также чтобы вся выделенная область была ссылкой

Проблема :

Как видно на скриншоте выше, текст лежит сверху.

Теперь собственно общий вопрос: Как выровнять текст вертикально по центру находящийся внутри li a, при условии что a растянут на всю ширину li.

Или подскажите как лучше такое ссылочное меню сделать.

vertical-align: middle не срабатывает, потому что <a> использует всю область <li>

Edited September 1, 2011 by Fedcomp

[Temiks]

Выровнять ссылку по центру?

К ссылке:

text-align: center; // это выравнивание горизонтальное

Если нужно вертикальное, то можно сделать как написано тут

http://forum.htmlbook.ru/index.php?showtopic=29106&pid=220671&st=0entry220671

или с помощью padding

Edited September 1, 2011 by Temiks

[Fedcomp]

Нет, нужно выровнять по центру по вертикали.

Т.е чтобы текст ссылки был по центру, а сейчас он прибит к верху, а картинки по центру.

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

vertical-align: middle не срабатывает, потому что <a> использует всю область <li>

Edited September 1, 2011 by Fedcomp

[Temiks]

Написал выше

[Gaspode]

line-height пользуйте тогда.

[Fedcomp]

Думаю чтобы было более понятна моя реализация, приведу код

html:

<div id="navtoolbar">
<div class="links">
	<ul>
		<li><a href="/project/profile" class="profile">Мой профиль</a></li>
		<li><a href="/project/servers" class="servers">Сервера</a></li>
		<li><a href="/project/balance" class="balance">4500.43 руб.</a></li>
		<li><a href="/project/account" class="account">Настройки аккаунта</a></li>
		<li><a href="/project/logout" class="logout">Выход</a></li>
	</ul>
</div>
</div>

CSS:

		#navtoolbar .links ul li {
			border: 1px solid blue;
			list-style-type: none;
			display: inline;
			padding: 1px 0px 21px 0px;
			background: url('./navigation/nav-rule.png') 0 50% no-repeat;

			font-size: 14px;
		}

		#navtoolbar .links ul li a {
			vertical-align: middle;
			color: #555555;
			padding: 2px 5px 21px 30px;
			background: transparent;
			text-decoration: none;
			background-position: center left;
			background-repeat:   no-repeat;
		}

		#navtoolbar .links ul li:hover{
			background: whiteSmoke;
			filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f4f4f4',endColorstr='#d6d6d6');
			background: -webkit-gradient(linear,0% 0,0% 100%,from(#f4f4f4),to(#d6d6d6));
			background: -moz-linear-gradient(270deg,#f4f4f4,#d6d6d6);
		}

/* ToolBar Links images */
#navtoolbar .links ul a.profile{
	background-image: url('./navigation/profile.png');
}

#navtoolbar .links ul a.servers{
	background-image: url('./navigation/servers.png');
}

.....

line-height пользуйте тогда.

А какое значение лучше поставить для центра? подбирать?

Через line-height хоть к li хоть к <a> получается вот такая ерунда

Т.е блоки вниз уезжают, а не текст

Edited September 1, 2011 by Fedcomp

[Temiks]

padding не подходит?

[Fedcomp]

padding не подходит?

если делать padding то иконки уедут.

Впрочем ща наверное так и сделаю, положение иконок поправлю процентами

[troll]

Мне кажется, если li сделать inline-block, убрать у li и a вертикальные padding'и, выбросить vertical-align и задать для a нужный line-height (равный высоте пункта меню), то получится как раз оно.

Edited September 1, 2011 by troll

[Fedcomp]

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

Хотя нет, немножко подкрутил ваш вариант добавив padding к a и все получилось как надо, спасибо!

Edited September 1, 2011 by Fedcomp

[troll]

Ох, снова я лоханулся... В принципе можно даже и без паддинга обойтись, если к a добавить display: block.

Edited September 1, 2011 by troll