Кнопка с помощью display:block;

[volkoff]

Итак имем:

Столбец ссылок (НЕ <div>)

Вот такой

ХТМЛ:

<div >

<a href="opera:blank" class="button"> Кнопка 1 </a>

<a href="opera:blank" class="button"> Кнопка 2 </a>

<a href="opera:blank" class="button"> Кнопка 3 </a>

<a href="opera:blank" class="button"> Кнопка 4 </a>

<a href="opera:blank" class="button"> Кнопка 5 </a>

<a href="opera:blank" class="button"> Кнопка 6 </a>

</div>

CSS:

.button:link

{

display:block;

border:#333 1px;

width:150px;

height:45px;

background-image:url(img/Button2.png);

background-repeat:no-repeat;

background-position:center;

text-align:center;

margin-top: 1px;

margin-bottom:1px;

margin-left: 5px;

}

.button:visited

{

display:block;

border:#333 1px;

width:150px;

height:45px;

background-image:url(img/Button2.png);

background-repeat:no-repeat;

background-position:center;

text-align:center;

margin-top: 1px;

margin-bottom:1px;

margin-left: 5px;

}

.button:hover

{

display:block;

border:#333 1px;

width:150px;

height:45px;

background-image:url(img/Button3.png);

background-repeat:no-repeat;

background-position:center;

text-align:center;

text-decoration:none;

margin-top: 1px;

margin-bottom:1px;

margin-left: 15px; /* отъезжает вправо при наведении*/

}

По центру горизонтально текст худо-бедно отцентровал через text-align:center;

А вот опустить не получается, ибо вместе с ним съезжает и фоновое изображение. Как быть ?

Спасибо !

ЗЫ: есть, конечно, мыслишка, оберныть каждую ссылку в <div> сделать фон для дива, а ссылку уже margin-ом кое как отцентровать - но это похоже на извращение

Edited September 28, 2010 by volkoff

[volkoff]

нашел способ:

Можно опускать текст с помощью padding-top , но на такую же величину надо уменьшать width этой конструкции.

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

Тем не менее интересно услышать другие варианты

[SelenIT]

Если все надписи однострочные, самый простой вариант — задать line-height, равный height'у.

[volkoff]

Если все надписи однострочные, самый простой вариант — задать line-height, равный height'у.

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

[SelenIT]

Какой еще минус? Высота строки по определению положительна и считается от верхнего края. А сами буквы оказываются как раз посередине...

[volkoff]

Какой еще минус? Высота строки по определению положительна и считается от верхнего края. А сами буквы оказываются как раз посередине...

точно. то я че-то не то вписал видимо.

Благодарю !