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>

Я установил высоту 45 пикселей на моем div. и я установил valign в середину, и даже установил поле на auto, но все равно не повезло. Это выглядит так:

Answer 1

Добавить transform: translateY(-50%);-webkit-transform: translateY(-50%); /* Safari & Chrome */ -moz-transform:translateY(-50%) -ms-transform: translateY(-50%); В вашем стиле тега привязки .

Answer 2

Я предложу вам лучший способ справиться с такими случаями. Чтобы сделать вертикальное выравнивание посередине, возможны 2 свойства отображения. 1. дисплей: таблица-ячейка, 2. дисплей: встроенный блок но в обоих случаях элемент, который должен быть выровнен по вертикали, также нуждается в эталоне для измерения высоты, чтобы он мог получить вертикальную среднюю точку.

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

Я бы использовал следующую css для элемента внутри div (т. Е. Тега)

дисплей: таблица-клетки; выравнивание по вертикали: среднее;

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>