Я пытаюсь создать несколько кнопок для веб-сайта, используя стилизованные гиперссылки. Мне удалось получить кнопку, выглядящую так, как я хочу, запустив одну небольшую проблему. Я не могу получить текст ( "Ссылка" в исходном коде ниже) для вертикального центра.
К сожалению, может быть более одной строки текста, как показано на второй кнопке, поэтому я не могу использовать line-height
для вертикального центрирования.
Моим первоначальным решением было использовать display: table-cell;
, а не inline-block
, и это сортирует проблему в Chrome, Firefox и Safari, но не в Internet Explorer, поэтому я думаю, что мне нужно придерживаться встроенного блока.
Как бы я поместил вертикальное центрирование текста ссылки в 57px
x 100px
inline-block
и попросил ли он использовать несколько строк текста? Спасибо заранее.
CSS
.button {
background-image:url(/images/categorybutton-off.gif);
color:#000;
display:inline-block;
height:57px;
width:100px;
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
font-weight:bold;
text-align:center;
text-decoration:none;
vertical-align:middle;
}
.button:hover {
background-image:url(/images/categorybutton-on.gif);
}
.button:before {
content:"Click Here For\A";
font-style:italic;
font-weight:normal !important;
white-space:pre;
}
HTML:
<a href="/" class="button">Link</a>
<a href="/" class="button">Link<br />More Details</a>