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

Question

[Herben]

Что я только не делал, padding, margin, line-height, align-items, flex и прочее...
Результаты были разные, то текст куда-то улетал/пропадал, то иконка улетала/пропадала, то иконка уходила в одну часть экрана, а текст в другую и т.д, но не разу нужного мне не было

Кусок кода кнопки

<button type="submit"><img src='images/done.svg'>Выполнить</span></button>

Что происходит:

Что мне нужно:


Заранее спасибо!

Comments

[iBird Rose]

у тебя span закрывается, но нигде не открывается. скорее всего в этом дело

[Herben]

iBird Rose, как я понял span используется для шрифтов, скорее всего ошибаюсь, в любом случае, я попробовал добавить его начало и убрать в принципе, ничего не изменилось :(

Answer 1

[Егор Жигарев]

Для начала сделай тег span парным, открывающего тега нет и для кнопки задай
button {
display: flex;
align-items: center;
}

Comments

[Herben]

Задавал уже такие теги несколько раз и ничего не менялось, но сейчас... сработало... что?
Спасибо!
https://www.youtube.com/watch?v=Rnk9wMaJLkI

Answer 2

[Noder SS]

Привет! Советую выучить flexbox по видео в Ютубе, без него никак .кнопка{
Display:flex;
Justify-content: center;
Align-items: center;
}