我遇到了以下问题。我有一个 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>
它最终看起来像这样
我希望它位于“单击以下按钮...”的文本下方。 而且我还发现不可能为文本设置一些填充并将其居中。 (那里的填充被夸大地设置为 50px,但它无论如何都不起作用)。
最佳答案
考虑使用 <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>
关于html - 将 div 对齐到其他元素下方并垂直对齐其文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59687656/