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＆＃39;转换＆＃39;你需要使用safari＆amp; chrome前缀：

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

它取决于Safari版本，它将从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;
}

垂直对齐图像

2 个答案: