Проблема выравнивания текста внутри тега по вертикали

Question

Я исследовал это и перепробовал все решения, но текст не выровнен по вертикали.

jsfiddle: http://jsfiddle.net/9a6pdfbt/

HTML:

<a>משטרה</a>

CSS:

a {
  font-size: 2rem;
  border: 2px solid black;
  padding: 10px;
  display: flex;
  align-items: center;
  vertical-align: middle;
}

Если вы используете ctrl + shift + c для проверки тега, вы можете видеть, что текст выровнен по низу тега, а не точно по середине

Answer 1

Если вы не укажете высоту, текст всегда должен быть выровнен по вертикали.

a {
  font-size: 2rem;
  border: 2px solid black;
  padding: 20px;
  display: flex;
  align-items: center;
  vertical-align: middle;
  background-color: red;
}

<a>משטרה</a>

Если вы укажете высоту, то flexbox должен сделать все это за вас.Что бы сломать твой код там было бы display: inline-block;.Я установил Скрипку для тебя: http://jsfiddle.net/3L5d7awj/

Answer 2

Если вы пытаетесь выровнять текст по центру, по вертикали, есть несколько способов сделать это.

Один из способов - использовать абсолютное позиционирование следующим образом (не будет работать для столбцов Bootstrap):

.parent-class {
  position: relative;
}

.parent-class a {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
}

И в вашем HTML:

<div class="parent-class">
  <a>משטרה</a>
</div>

Если вы используете Flexbox, все, что вам нужно, это в вашем CSS:

a.flexbox {
  display: flex;
  align-items: center;
  justify-content: center;
}

А в вашем HTML:

<a class="flexbox">משטרה</a>