IMHO.WS - Вертикальное выравнивание внутри блока ссылки

IMHO.WS (http://www.imho.ws/index.php)

- Веб-программирование (http://www.imho.ws/forumdisplay.php?f=29)

- - Вертикальное выравнивание внутри блока ссылки (http://www.imho.ws/showthread.php?t=66138)

TRiPLE

12.08.2004 16:52

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

Задачка такая: в ячейке таблицы лежит ссылка. Через css этой ссылке заданы размеры и по высоте блок получается раза в два больше высоты строки текста, в ней содержащегося. Проблема в том, что текст "прилип" к верху блока и никак мне его не перетащить в середину. Может кто-нибудь что-то подскажет?
Заранее спасибо.

aceofext

12.08.2004 18:57

Автоматически расположить текст в центре по вертикали никак нельзя. Используй css аттрибут padding-top со значением в пикселах.

WMRomik

12.08.2004 19:28

а если так:

Код:

<td><div id="divName" align="center" valign="middle"><a href="javascript:;">Это ссылка</a></div></td>

aceofext

12.08.2004 19:41

WMRomik
У элемента DIV нет свойства valign, оно есть у TD. Так что в твоём примере DIV вообще не нужен. А вообще, насколько я понял, TRiPLE хочет, что-бы сама ссылка, то есть элемент A, был определённой высоты. Я уже сталкивался с этой проблемой раньше. Я использовал padding-top.

WMRomik

12.08.2004 21:22

Ну я тупанул малька, вот так работает.

<div style="height: 100px; background-color: #ccc" align="center">
<span style="line-height: 100px; vertical-align: -50%;"><a href="javascript:;">Это ссылка</a></span>
</div>

TRiPLE

13.08.2004 15:01

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

WMRomik

13.08.2004 17:21

Код:

<html> 

<head> 

<title>LinkChell</title> 

<style>

A{color:#ccc}

A HOVER{COLOR:#333}

.mout {BACKGROUND:#333;color:#ccc}

.mover {BACKGROUND:#ccc;color:#333;CURSOR:HAND}

</style>

</head>

<body>

<table><tr>

<td class="mout" onmouseover="this.className='mover'" onmouseout="this.className='mout'" height="100" width="500" onclick="location.href='http://imho.ws'">

<div style="height:100px" align="center">

<span style="line-height: 100px; vertical-align: -5%;">This is a link</span>

</div></td></tr></table>

</body> 

</html>

Часовой пояс GMT +4, время: 07:49.