CSS - центрирование текста по вертикали в логотипе

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

Логотип создается с помощью элемента - заголовка первого уровня

1

h1

1

forum.htmlbook.ru

Необходимо сделать также, как и на psd-макете. Чтобы текст располагался по-вертикали по-центру, и был смещен при этом вправо. Часть html-кода, в котором создается логотип со ссылкой, показана ниже:

С установкой фонового изображения проблем не возникает. Задаю ширину и высоту для блока h1 равной ширине и высоте логотипа. И прописываю для него картинку в качестве фона.

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

Итак. С помощью свойства

1

display: table

1

h1

1

vertical-align

Строчный элемент

1

а

1

display: table-cell

1

vertical-align: middle

Осталось сместить текст вправо на заданную величину. Это выполняется с помощью правила

1

padding-left: 80px

Ниже привожу кусок кода, отвечающего за стилизацию логотипа сайта:

.logo{
  background: url(../img/logo.gif) 0 0 no-repeat;
  height: 100px;
  width: 180px;
  display: table; /*!*/

}
.logo a{
  font-family: 'webfontbold';
  font-weight: bold;
  font-size: 20px;
  color: #090909;
  text-transform: uppercase;
  text-decoration: none;
  display: table-cell; /*!*/
  vertical-align: middle; /*!*/
  padding-left: 80px;
}

Вот задача и решена. Разобрался с центрирование текста по-вертикали с помощью правил

1

display: table

1

display: table-cell

1

vertical-align: middle

На этом все.