为什么我的<a> tag in the middle of my &#34;div&#34;. valign=middle does not work

Question

This is the code for my 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>

I set a height of 45px on my div. and the a I've set valign to the middle, and even set the margin to auto, but still no luck. It looks like this:

不是

Answer 1

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

display：table-cell; 垂直对齐：中间；

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>

Answer 2

我将建议您处理此类情况的最佳方法。 为了使垂直对齐居中，可以使用2种显示属性。  1. display：table-cell，2. display：inline-block  但是在这两种情况下，都需要垂直对齐的元素还需要一个参考来测量高度，以便获得垂直的中间点。

html

<div>
<span></span>
<a>APPEAR IN MIDDLE</a>
</div>

css

div span, div a{display:inline-block; vertical-align:middle;}
div span, div{height: 200px}
div span{margin-left:-1px; width:1px;}

可能会帮助您

Answer 3

在您的锚标签样式中添加transform: translateY(-50%);-webkit-transform: translateY(-50%); /* Safari & Chrome */ -moz-transform:translateY(-50%) -ms-transform: translateY(-50%);。