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

debugcn 发表于 Dev

亚历杭德罗

我有以下问题。我有一个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>

最终看起来像这样

我希望它位于显示“单击以下按钮...”的文本下方。而且我还发现不可能对文本设置一些填充并将其居中。（将那里的填充夸张地设置为50px，但仍然无法正常工作）。

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

多哈·海尔米

考虑<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 [email protected]. 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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。