форматирование сылки

red_88 · March 4, 2009

народ, помогите плиз с задачкой:

надо чтобы ссылка независимо от длины текста (возможно на одну или две строки) находилась ровно посередине backgraund-image'a, последний имеет заведомо бОльший размер чем, самая большая ссылка. Размер имейджа мы знаем (допустим 220px*60px). Вот класс для ссылки:

a.manufacturer

{

background-image: url(src/button.gif);

width: 220px;

height: 60px

text-align: center;

vertical-align: middle;

}

a.manufacturer:hover

{

background-image: url(src/button+.gif);

}

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

Колос · March 4, 2009

Так как у тебя сейчас написано и не должно работать. Фон подкладывается от границ элемента для которого он задан. Поэтому он будет перемещаться вместе с элементом, для которого он задан и text-align, vertical-align не помогут. Попробуй лучше с margin, padding. Хотя сомневаюсь , что получится.

Victor Ananiev · March 4, 2009

только JS, здать ссылке display:block; а потом скриптами высчитывать точную середину, можно родителю задать display:table-cell; vertical-align:middle; но вы же сказали без блоков и таблиц...

red_88 · March 4, 2009

2 VictorAnaniev

я просто пробовал загонять эту ссылку в таблицу, у ячейки класс

td.spec

{

text-align:center;

display:table-cell;

vertical-align:middle;

}

всё равно не пашет (((

Vlad · March 4, 2009

По центру горизонтали выровнять легко, достаточно добавить display: inline-block; и точку с запятой поставить после height.

red_88 · March 4, 2009

2 Vlad

У меня вся сложность не с горизонталью,а с вертикалью (((

кстати, display: inline-block; добавлять к классу сцылки или в родителя?

Victor Ananiev · March 4, 2009

сцылки)

dber · March 5, 2009

не понял я что-то как приделав к ссылке "display: inline-block; и точку с запятой поставить после height. " заставить её встать по центру.

но вот так сделал (к сожалению как раз от ссылки в этом случае ничего не зависит)

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>PPC</title>
<style type="text/css">

.div1
{
border:1px solid;
background:red;
width:300px; 
height:300px;
display:table;
}

.inside_div{
	height:100%;
	width:100%;
	display:table-cell;
	background:yellow;
	vertical-align:middle;
	text-align:center;
}

.tab td{
background:yellow;
	vertical-align:middle;
	text-align:center;
}

</style>
</head>
<body>

<div class="div1">
	<div class="inside_div"><a href="#">Сцылка</a></div>
</div>




<table class="tab div1">
<tr>
	<td>
	<a href="#">Сцылка</a>
	</td>
</tr>
</table>

</body>
</html>

Sign In

форматирование сылки

Question

red_88

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

Колос

Link to comment

Share on other sites

Victor Ananiev

Link to comment

Share on other sites

red_88

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

red_88

Link to comment

Share on other sites

Victor Ananiev

Link to comment

Share on other sites

dber

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information