Как выровнять текст ссылки по центру?

Question

[ahillesius]

Есть ссылка расположена в header. Header width = 100%, height = 41px
Как центрировать текст ссылки Login/Register по высоте относительно header? При этом при наведении background-color ссылки должен меняться на темно-зеленый.
Как должно выглядеть https://habrastorage.org/webt/61/cd/e8/61cde837dbc...

<header>
    <div class="circle"></div>
    <div class="container_1">Free Shipping on Orders of Rs. 2587 - <strong style="color:yellow">SHIP39</strong></div>
    <div><a href="#" class="login_button"><span class="text">Login / Register</span></a></div>
    </header>

header {
    background-color: rgb(0, 146, 63);
    box-shadow: 0px 5px 15px 0px rgba(0, 146, 63, 0.5);
    position: relative;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 41px;
    z-index: 3;
    vertical-align: middle;
}
.login_button {
    position: absolute;
    right: 5%;
    color: white;
    height: 41px;
}
.login_button .text {
    padding: 20px; Почемуто отступы появляются только по бокам
}

Как есть сейчас https://habrastorage.org/webt/61/cd/ed/61cded2f563...

Comments

[Ankhena]

1. Ваш кругляшок - это не div. Это украшение и его вообще не должно быть в разметке. Обычный псевдоэлемент.
2. strong имеет семантическую нагрузку = важный текст. В данном случае это скорее span с жирностью в стилях.
3.

Почемуто отступы появляются только по бокам

Потому что span по умолчанию инлайновый. Задайте фон, посмотрите, как работают для них padding.
4. Зачем 3 обертки для одной ссылки? (div, a и span)
Судя по макету, одной a вполне достаточно.
5. Абсолюты тут не нужны.
Используйте флексы или гриды.

[ahillesius]

1. Можете детальнее объяснить по псевдоэлементу ? Я использую для этого
"::before { content". Но при этом невозможно использовать top или bottom, чтобы выставить отступы так, как необходимо. Возможно только left и right. Как тогда использовать псевдоэлемент и какой именно ?

Answer 1

[Дмитрий]

Очевидный flexbox же. 2021 (почти 22) год на дворе.

<div class="link-container"><a href="#" class="login_button"><span class="text">Login / Register</span></a></div>

.link-container {
    display: flex;
    align-items:center;
    height: 100%;
}

link-container меняешь на что-то по своему усмотрению.