将href按钮和图像按钮对齐在一行中

Question

我在div中的html中定义了以下两个按钮：

<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创建的按钮与定义为图像的按钮不对齐。如何将这些按钮对齐？

附言：如果两个按钮都被定义为一个图像，我就不会面临这个问题。

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属性在一行中对齐元素。