在其他元素下方对齐 div 并垂直对齐其文本

Question

我有以下问题。 我有一个 div，我无法垂直对齐其文本，也无法将其放置在其他 div 下方。 我的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>

它最终看起来像这样

我希望它位于“单击以下按钮...”的文字下方。 而且我还发现不可能为文本设置一些填充并将其居中。 （那里的填充被夸大地设置为 50 像素，但无论如何它都不起作用）。

完整代码： https : //pastebin.com/NqgXs4tD

Answer 1

考虑在<tr>使用<td> <tr>而不是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

使用 flex-box 作为显示，因此您可以将其水平和垂直对齐。

您也使用 display 2 次。 你应该整理你的规则..

并且因为 HTML5 的存在，您永远不应该将表格用于设计，而只能用于表格。 你验证过你的文件吗？ 你打开一个新的表格标签，而旧的标签没有关闭。

Answer 3

使用display: flex和align-items: center您可以垂直对齐内容元素（和文本）。 使用order: {number}您可以重新排序 flexbox 元素的子元素。