I have the following 2 buttons defined in html inside a div
as:
<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>
Somehow, the button created using the a tag
is not aligned with the button defined as an image. How do I align these buttons together?
PS: I don't face the issue if both the buttons are defined as an image.
Try to use display:flex
with flex-direction: row
:
<div class="button-div foo" align="center">
</div>
CSS:
.foo {
display: flex;
flex-direction: row;
}