Создать кнопку из тега с центрированным текстом

Question

У меня есть контейнер с заданным размером и несколько <a> тегов внутри. Эти ссылки находятся на одной линии и центрированы по вертикали. Теперь то, что я хочу сделать, это указать высоту для тегов <a>, чтобы не только текст можно было щелкнуть, но и поле вокруг него. Мне удалось это сделать, но, к сожалению, я не могу сосредоточить текст в ящике.

Поэтому я хотел бы центрировать текст в кнопках, не меняя, по возможности, html-сторону вещей. Вот JSF моей нынешней ситуации:

https://jsfiddle.net/ra3c3vtp/6/

HTML:

<div id=container> 
    <div class=nav_list> 
     <a href="">button</a> 
     <a href="">button</a> 
     <a href="">button</a> 
    </div> 
</div> 

CSS:

#container { 
    height: 160px; 
    width: 600px; 
    background-color: #ededed; 
} 

.nav_list { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 

a { 
    display: inline-block; 
    text-decoration: none; 
    color: green; 
    padding-left: 12px; 
    padding-right: 12px; 
    height: 120px; 
    background-color: #000000; 

} 

Answer 1

Естественный выбор для создания текста по вертикали выровненный по центру (» центрированный "по вертикали) заключается в добавлении CSS vertical-align: middle. В этом случае это не сработает, поскольку оно скорее попытается выровнять весь тег, а не его содержимое.

Вместо этого вы можете использовать line-height вместо height, что сделает всю строку TEXT достаточным пространством для вертикального перемещения и выравнивания, как вы хотели.

https://jsfiddle.net/ra3c3vtp/9/

Answer 2

height делает верхние и нижнее пространство несимметричным. поэтому вам нужно наложить на оба вместо того, чтобы присваивать высоту, чтобы увеличить высоту окна. Я заменил имущество height стенографическим наименованием padding. Теперь он отлично работает, высота такая же, и текст «кнопки» помещается в центр коробки. проверить себя:

a { 
    display: inline-block; 
    text-decoration: none; 
    color: green; 
    padding: 60px 12px; //top and bottom padding = 60px , left and right padding = 12px; 

    background-color: #000000; 
    text-align: center; 
    vertical-align: middle; 

} 

ой, я добавил text-align: center и vertical-align: middle, чтобы убедиться, что он остается в центре, когда изменяется обивка.