Выравнивание по вертикали

Question

Хорошая старая проблема вертикального выравнивания img! Я справился с этим, но по внешнему виду он не работает на сафари! У кого-нибудь есть другие способы сделать это?

Код:

<div class="logo"> 
     <a href="index.html"><img alt="" src="img/logo-white.png"></a> 
    </div> 


    .logo { 
     padding-top:2.5%; 
     height: 104px; 
    } 

    .logo img { 
      position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
    } 

Благодаря

Answer 1

Поскольку высота DIV фиксируется, вы можете отрезать пакости, а просто равняться line-height к значению height.

.logo { 
 
    padding-top:2.5%; 
 
    height: 104px; 
 
    outline: 1px solid red; 
 
    line-height: 104px; 
 
}

<div class="logo"> 
 
     <a href="index.html"><img alt="Meazey Web design" src="img/logo-white.png"></a> 
 
</div>

Answer 2

первую очередь, использовать CSS3 'преобразования' вы должны использовать сафари & хромовый префикс:

-webkit-transform: translateY(-50%); 
transform: translateY(-50%); 

это зависит от версии сафари, это будет поддерживается с версии 7.1 и выше: http://caniuse.com/#search=transform

Существует более двух способов сделать это, но давайте посмотрим на два сейчас:

1)

.logo { 
    height: 104px; 
    position: relative; 
} 

.logo img 
{ 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    margin: auto 0; 
} 

2)

.logo 
{ 
    height: 104px; 
} 

.logo > a 
{ 
    display: table-cell; 
    vertical-align: middle; 
    height: inherit; 
}