垂直对齐离子标题中的文本和图像

Question

我有这个代码来对齐离子标题栏中的标题和图像：

CSS：

.banner-top {
  background-color: #EE7130;
  height: 19.6vw;
}
.banner-top h2 {
  font-family: "JEMBOhands", sans-serif;
  font-size: 9vw;
  color: white;
#s_back {
  margin-left: 3.4vw;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

标记

  <a href="#/list" nav-transition="none"><ion-header-bar class="banner-top" align-title="left">
    <h2 id="s_back"><img src="img/back_b.png" id="s_back_img"alt="">STORIES</h2>
  </ion-header-bar></a>

它在浏览器中看起来很糟糕：

在设备上就像这样：

我的错误是什么？ 这是一个离子游戏：http://play.ionic.io/app/b3660e2f6a0c

  

更新：它现在正在离子播放中工作但在iOS模拟器中仍然存在错误。http://play.ionic.io/app/bb1620290ea4

Answer 1

@Oliver：我检查了你的代码并看到了s_back的样式

public function setClient(\DevisBundle\Entity\Client $client = null)
{
    $this->client = $client;

    return $this;
}

您是否可以尝试添加更多特定于转换属性的供应商，不确定100％：D

#s_back {
    margin-left: 3.4vw;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}