Почему не работает vertical-align: center?

Question

[fleshik]

Подскажите почему vertical-align: top и vertical-align: botom работают нормально, а vertical-align: center не работает с чем это связано и как тогда выровнять красный квадрат по середине текста ?

<a href="">
        <span class="span"></span> 
        Gegeegeg
    </a>

a {
  background-color: blanchedalmond;
  text-decoration: none;
  font-size: 50px;
}

.span {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: red;
  vertical-align: center;
}

Comments

[Ankhena]

Во-первых, у vertical-align в принципе нет значения center. Во-вторых, vertical-align делает не то, что вы хотите.

Замените на флексы.

А ещё, в идеале, замените span на псевдоэлемент, нечего ему делать в разметке.

Answer 1

[Ivan Ustûžanin]

потому что значение должно быть middle https://developer.mozilla.org/en-US/docs/Web/CSS/v...

Comments

[fleshik]

Но middle выравнивает не совсем по середине, а если мы возьмем следующий пример то middle вообще не помогает как быть в таком случае?

<a href="">
        <span class="span"></span> <span class="span1"></span>
       
    </a>

a {display: inline-block;
    padding: 20px;
    background-color: blanchedalmond;
    text-decoration: none;
    font-size: 50px;
  }
  
  .span {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: red;
    vertical-align: middle;
  }

.span1{
  display: inline-block;
width: 50px;
height: 75px;
background-color: blue;
}

[Ivan Ustûžanin]

fleshik, использовать flex, с его align-items/align-content center т.к. vertical-align работает через baseline и другие характеристики текстов, что не всегда смотрится логично

Answer 2

[Danny Arty]

Во-первых, у свойства vertical-align нет значения center, есть middle.

Во-вторых, middle работает не так, как вы себе представляете. Т.е. он не выравнивает строчный/строчно-блочный элемент по центру строки. Он выравнивает его относительно середины воображаемой буквы x (т.е. берется условное значение x-height).
Смотрите пример ниже.


Я бы посоветовал сделать с помощью flex