SiteIS

HTML и CSS - революция в мире web-дизайна!

- управление отображением множества документов с помощью каскадных таблиц стилей

- Более точный контроль над внешним видом web-документов

- Различные представления для разных носителей информации

- Сложная и проработанная техника дизайна

Выравнивание без expression

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

HTML разметка будет следующей:

<a class="mainlevel" href="#">
	<span class="first">
		<span class="second">Ссылка с двумя строками текста</span>
	</span>	
</a>

Что бы ИЕ 7 не подкидывал сюрпризов, текст внутри ссылки придется обернуть в два спана.

Стили для блока пропишем следующие:

a.mainlevel {
width:218px;
height:66px;
display: table-cell;
vertical-align: middle;
background-color:#ccc;
border:1px solid #000;
*position: relative;
*display:block;
}
a.mainlevel:hover {
background-color:#eee;
}
a.mainlevel span.first {
padding:0 70px 0 15px;
position:relative;
display:block;
*position: absolute;
*top: 50%;
}
a.mainlevel span.second {
*position:relative;
*top: -50%;
}

Пример того, что должно получиться:

Вот и все. Не очень изящное решение, но работает устойчиво во всех популярных браузерах.