Align div below other elements and align its text vertically - html

Question

I've got the following issue. I've got a div where I'm unable to vertically align its text and also unable to place it below other divs.
My div:
<div th:text="#{mailContent.resetBtn}" style="
border: 0;
color: white;
height: 25px;
display: table-cell;
background-color: #FD8907;
cursor: pointer;
border-radius: 2px;
outline: 0;
text-align: center;
font-family: 'Rubik', sans-serif;
font-size: 16px;
padding: 50px;
display: table;
margin: 0 auto;
vertical-align: middle;
">
RESET PASSWORD
</div>
It ends up looking like this
I want it to be below the text that says "click on the following button...".
And I also find it impossible to set some padding to the text and centering it.
(Padding there is exaggeratedly set to 50px but it doesn't work anyways).
Full code:
https://pastebin.com/NqgXs4tD

Answer 1

Consider using <td> inside a <tr> instead of div
#title{
font-size: 25px;
font-weight: bold;
}
#pass-content {
font-style: italic;
font-family: 'Rubik', sans-serif;
color: #999;
font-size: 15px;
}
#btn-info {
padding: 20px 0 10px 0;
color: #153643;
font-family: 'Rubik', sans-serif;
font-size: 15px;
line-height: 20px;
}
#btn {
border: 0;
color: white;
height: 25px;
background-color: #FD8907;
cursor: pointer;
border-radius: 2px;
outline: 0;
text-align: center;
font-family: 'Rubik', sans-serif;
font-size: 13px;
padding: 5px;
display: table;
margin: 0 auto;
vertical-align: middle;
}
<table>
<tr id="title">
<td>Password Reset</td>
</tr>
<tr>
<td id="pass-content"> This is an email to reset the password for the account 123#gmail.com. If you don't wish to change your password please ignore this email. </td>
</tr>
<tr id="btn-info">
<td>
Click on the following button:
</td>
</tr>
<tr id="btn">
<td>RESET PASSWORD</td>
</tr>
</table>

Answer 2

Use flex-box as display, so you can align it horizontal and vertical.
Also you use display 2 times. And you should sort ur rules..
And because HTML5 exist you should never ever use table for design and only for tables. Did you validate your file? You open a new table tag while the old one isn't closed.

Answer 3

With display: flex and align-items: center you can vertically align the content elements (and text). And with order: {number} you can re-order the child elements of a flexbox element.