Выровняйте кнопку href и кнопку изображения в одной строке

Question

У меня есть следующие 2 кнопки, определенные в html внутри div как:

<div class="button-div" align="center">

            <a id="cancel" style="background-color: #4b82c3;color: white;display:inline;text-decoration: none !important; font-size: 12px; padding: 10px 11px;margin: 8px 0;border: 1px;border-radius: 20px;" href="/">Cancel</a>

            <input type="image" id="btn" src="/static/images/submit-button.png" value="Submit" alt="Submit" width="90" height="40">

          </div>

Каким-то образом кнопка, созданная с помощью a tag, не выровнена с кнопкой, определенной как изображение , Как мне совместить эти кнопки вместе?

PS: Я не сталкиваюсь с проблемой, если обе кнопки определены как изображения.

Answer 1

Попробуйте использовать display:flex с flex-direction: row:

<div class="button-div foo" align="center">
</div>

CSS:

.foo {
  display: flex;
  flex-direction: row;
}

Answer 2

используйте свойство css flex, чтобы выровнять ваши элементы в одну строку.