Почему уехал DIV?

Question

[Кирилл Жиляев]

<div class="crowns">
            <div class="crown_blue"></div>
            <div class="crown_stat" style="
    font-weight: 800;
    font-size: 20;
    height: 100%;
    /* position: relative; */
    /* margin: auto; */
">3-0</div>
            <div class="crown_red"></div>
        </div>

.crown_blue {
    background-image: url(/images/blue-crown.png);
    background-size: cover;
    width: 30px;
    height: 25px;
    margin-top: 7px;
}

.crown_red {
    background-image: url(/images/red-crown.png);
    background-size: cover;
    width: 30px;
    height: 25px;
    margin-top: 7px;
}

Почему DIV c crown_stat уехал чуть ниже? margin не действует на него никак.

spoiler

P.S. Если убрать рядомстоящие DIV, то все будет нормально

Comments

[Иван]

line-height мб меньше сделать

[Кирилл Жиляев]

Иван: не помогло. На скрине видно, что уехал блок

[Андрей]

если скопировать твой код в песочницу, то они не встают в ряд, что задано "crowns"?

[Кирилл Жиляев]

https://opegittest.vkapps.ru/battle/JRJRU8?auth_si...

[Андрей]

Кирилл Жиляев: я понимаю, что прозвучит банально, но я должен спросить а флекс нельзя использовать?
Задаешь .crowns {display: flex; align-items:center}и все. Забыл про этот блок.
Или же всем трем вложенным блокам float:left, среднему line-height: 25px (как высота блоков с коронами) и vertical-align:middle&

Answer 1

[PiggyPig]

Родителю (в данном случае <div class="crowns">) задать следующее:

display: flex; 
align-items: center;

+ font-size должен иметь измеряемую величину (%, px, em, rem и т.д.).
+ не используйте height: 100%, если у родителя не задана фиксированная высота, т.к. это не имеет смысла.

Comments

[Кирилл Жиляев]

А где о flex можно почитать? Просто первый раз вижу и слышу

[PiggyPig]

Например вот здесь доступно написано. Только не злоупотребляйте flexbox'ами.