Как сделать валидную кнопку-ссылку

[KoDA86]

Добрый день, вот код:

<div style="width: 100px; height: 100px; background-color: blue;">

<p style="border: 1px solid; height: 100px;">

<a href="#" style="display: block;">Кнопка</a>

</p>

</div>

Хочу сделать кнопку,чтобы при наведении на любую ее часть она определялась как ссылка, пока получается, что ссылка только текст. Что не так? И как вообще лучше сделать посоветуйте.

[Great Rash]

a {
  display: block;
  width: 100px;
  height: 100px;
  background-color: blue;
  border: 1px solid;
}

[KoDA86]

Спасибо, хотя вроде читал, что у тега <a> не валидно ставить width и height.

[ablay2009]

Валидность не главное

[KoDA86]

Теперь не могу понять как в этой кнопке текст посередине выровнять. Подскажите.

[tius]

text-align: center;

[SelenIT]

  Quote

хотя вроде читал, что у тега <a> не валидно ставить width и height

Надо читать не вроды, а спецификации

  Quote

как в этой кнопке текст посередине выровнять

Если текст заведомо в 1 строку — проще всего поменять height на line-height

[KoDA86]

  Quote

  Quote

как в этой кнопке текст посередине выровнять

Если текст заведомо в 1 строку — проще всего поменять height на line-height

А если не в одну строку, а их несколько?

[Catherine]

  On 2/19/2012 at 9:00 AM, KoDA86 said:

  Quote

  Quote

как в этой кнопке текст посередине выровнять

Если текст заведомо в 1 строку — проще всего поменять height на line-height

А если не в одну строку, а их несколько?

Вариант номер раз - использование значений table и table-cell свойства display, не работает в ie7 и ниже;

Вариант номер два - не указывать явно высоту ссылки, а назначить одинаковые padding'и сверху и снизу. Самой интересно, какие есть еще варианты

Господа профессионалы, поправьте меня, если что не так.

Edited February 19, 2012 by Catherine

[KoDA86]

  On 2/19/2012 at 10:15 AM, Catherine said:

Вариант номер раз - использование значений table и table-cell свойства display, не работает в ie7 и ниже;

Вариант номер два - не указывать явно высоту ссылки, а назначить одинаковые padding'и сверху и снизу. Самой интересно, какие есть еще варианты

Господа профессионалы, поправьте меня, если что не так.

Интересные варианты, спасибо. Действительно, почему нет именно атрибута тега, который бы отвечал за выравнивание по вертикали. Или есть но о нем мало кто знает))

Edited February 19, 2012 by KoDA86

[Catherine]

  On 2/19/2012 at 11:29 AM, KoDA86 said:

Интересные варианты, спасибо. Действительно, почему нет именно атрибута тега, который бы отвечал за выравнивание по вертикали. Или есть но о нем мало кто знает))

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

У тега td, к примеру, есть атрибут valign, но его с таким же успехом можно заменить css свойством vertical-align

Edited February 19, 2012 by Catherine

[DStereo]

Вариант кнопки с несколькими строками, вот.