Вертикально Центрирование Ссылки на внутренней Div

Question

http://www.fccorp.us/index.php

Вертикальная колонка слева моя система меню сайта. Столбец - это div с высотой: 100%, а разные детали - над ним.

Кнопки DIV с пустыми кнопками в качестве фона, со ссылками на них. У меня две разные кнопки размера, большая - 60 пикселей высотой и маленькая 30 пикселей. Используя CSS, я могу заставить ссылки центрировать по вертикали независимо от высоты DIV кнопки?

Я смотрел здесь и использовал несколько сайтов CSS & Приложения для Android. Сайт здесь предполагает, что я не могу, но я не могу понять, почему группа CSS не создавала вертикально центрирующую функцию, поскольку она кажется такой необходимой.

Я просто что-то пропустил или действительно пытаюсь получить что-то, что недоступно с помощью CSS?

Answer 1

На основании вашего сайта вы можете использовать line-height для настройки вертикального позиционирования текста.

Попробуйте применить это к вашим 30px высоких ссылок:

line-height: 30px; 

И это для 60px высокий:

line-height: 60px; 

Кроме того, вы не должны быть вложенности <div> тегов в <a> тегов.

Answer 2

Добавьте это в свой CSS. Он будет работать независимо от высоты ваших кнопок:

.menubar a div { 
    display: table-cell; 
    vertical-align: middle; 
} 

Answer 3

Используйте это:

.menubuttonthick{line-height:60px;} 
.menubuttonthin{line-height:30px;} 

Это будет центрировать все ссылки.

На другой ноте, в настоящее время у вас есть следующая структура:

<a href="#"> 
    <div>text</div> 
</a> 

То есть недопустимый HTML. Я не парень типа «HTML должен быть действительным во все времена», но когда вы можете легко это исправить, я думаю, что это не помешает сделать его действительным. Вы должны использовать следующее:

<div> 
    <a href="#">text</a> 
</div>