html - Css 为什么我的 <a> 标签不在我的 "div"中间。 valign=middle 不起作用

Question

这是我的 div 的代码:

 <div height="45" align="center" valign="middle" style="font-family: 'Lato', sans-serif; font-size: 14px; border-radius: 6px; 
color: #ffffff;line-height:15px;background-color: #24b646;width: 180px;padding: 0px;margin: 30px 0 30px 60px;height: 45px;"
class="mobileWidth100 mobilePadding0">
     <a valign="middle" width="auto" href="" target="_blank" alias="" style="font-family: 'Lato', sans-serif; 
     text-decoration: none; color: #ffffff;font-weight:bold; letter-spacing:1px;margin: auto;height: 45px;
     line-height: 15px;">{% trans 'Manage Team'%}</a>
 </div>

我在我的 div 上设置了 45px 的高度。我已经将 valign 设置为中间，甚至将 margin 设置为 auto，但仍然没有成功。它看起来像这样:

Answer 1

我会在 div 内的元素(即 a 标签)上使用以下 css

显示:表格单元格； 垂直对齐:居中；

a{
font-family: 'Lato', sans-serif;text-decoration: none; color: #ffffff;font-weight:bold; letter-spacing:1px;height: 45px;line-height: 15px;vertical-align: middle;display:table-cell;
}

div{

font-family: 'Lato', sans-serif; font-size: 14px;
border-radius: 6px; 
color: #ffffff;
line-height:15px;
background-color: #24b646;
width: 180px;
padding: 0px;
margin: 30px 0 30px 60px;
height: 45px;    

}

<div height="45" align="center" valign="middle" style=""
class="mobileWidth100 mobilePadding0">
     <a width="auto" href="" target="_blank" alias="" style="">Example</a>
 </div>

<div height="45" align="center" valign="middle" style=""
class="mobileWidth100 mobilePadding0">
     <a width="auto" href="" target="_blank" alias="" style="">Example over<br>two lines !!!</a>
 </div>