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

Question

Не понимаю куда и что писать чтобы картика и кнопка были по одной линии.

Должно выглядить так -

header button {
    color: #56ce4d;
    padding: 25px 50px;
    text-align: left;
    font-size: 23px;
    display: flex;
    flex-wrap: wrap;
}

.btn img {
    width: 50px;
    color: #56ce4d;
    margin-right: 5px;
}

    <header>   
       <div class="enter">
          <button class="btn"><img src=".//images/user (4).png" alt="К">Войти</button>
        </div>
    </header>

Answer 1

Достаточно прописать родителю картинки (в данном случае button) align-items: center; p.s. Поменял картинку, чтобы можно было посмотреть

header button {
    color: #56ce4d;
    padding: 25px 50px;
    text-align: left;
    font-size: 23px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.btn img {
    width: 50px;
    color: #56ce4d;
    margin-right: 5px;
}

<header>   
       <div class="enter">
          <button class="btn"><img src="https://cdn-icons-png.flaticon.com/512/1250/1250689.png" alt="К">Войти</button>
        </div>
    </header>

БЛОГ НА HUSL

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

Ответы (1 шт):