мне не удается выровнять текст по вертикали внутри тега <a>

Question

Я не могу выровнять текст по вертикали внутри тега , как вы можете видеть здесь .

navigation-item__link {
  color: #000;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ccc;
}

<a class="navigation-item__link" href="/auth">Login</a>

также пытались,

vertical-align: middle;

но это также не сработало.
любая помощь приветствуется.

Answer 1

Как говорит Робин, вы должны поместить свой элемент в div и назначить эти свойства, высоту и ширину родительскому элементу, у ответа Робина нет высоты, поэтому вы не можете видеть его по центру

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: #ccc;
  height: 200px;
}

<div class="wrapper">
  <a href="/auth">Login</a>
</div>

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: #ccc;
}

<div class="wrapper">
  <a href="/auth">Login</a>
</div>

Answer 2

Как правило, для кнопки c нет необходимости использовать flexbox.

Для по горизонтали изменить отображение с display: inline (значение по умолчанию) для отображения block и добавления выравнивания текста по центру.

a{
  display: block;
  text-align: center;
  background: lightgray;
}

<a class="navigation-item__link" href="/auth">Login</a>

Иногда вы хотите выровнять кнопки inline-block - самый простой способ сделать это с помощью дополнительной оболочки text-align:center.

a{
  display: inline-block;
  padding: 10px 15px;
  background: lightgray;
  line-height: 1;
  
}

.align-center{
  text-align: center;
}

<div class="align-center">
   <a class="navigation-item__link" href="/auth">Log in</a>
   <a class="navigation-item__link" href="/auth">Sing up</a>
   <br><br>
   <a style="display: block;" class="navigation-item__link" href="/auth">Back</a>
 </div>

Для V-align - используйте padding-top / bottom (Легче управлять таким пространством, как это, а не по flexbox или по высоте / мин. высота): https://www.w3schools.com/css/css3_buttons.asp

a{
  display: block;
  text-align: center;
  background: lightgray;
  padding: 10px 15px;
}

<a class="navigation-item__link" href="/auth">Login</a>

Если вы хотите выровнять кнопку на каком-нибудь "карточном", то флексбокс очень полезен.

a{
  display: block;
  text-align: center;
  background: lightgray;
  padding: 10px 25px;
}

.flex-align-v-h{
  min-height: 100vh;
  background: gray;
  display: flex;
  align-items: center;
  justify-content: center;
}

h1{
  text-align: center;
}

<section class="flex-align-v-h">
  <div>
    <h1>Hello</h1>
    <a class="navigation-item__link" href="/auth">Login</a> 
  </div>
</section>

Если текст не соответствует элементу проверки кнопки (возможно, ваши стили наследуют дополнительный верхний / нижний край / отступ).

Answer 3

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

ОБНОВЛЕНИЕ: оберните ваш a тег div и задайте свойства flex этому div.

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: #ccc;
}

<div class="wrapper">
  <a href="/auth">Login</a>
</div>