html - 垂直对齐 ionic 标题中的文本和图像

Question

我有这段代码来对齐 ionic 标题栏中的标题和图像:

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>

在浏览器中看起来很一般:

在设备上像这样:

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

UPDATE: It's working now in ionic play but is still wrong in the iOS simulator.. http://play.ionic.io/app/bb1620290ea4

Answer 1

@Oliver:我检查了你的代码，看到了 s_back 的样式

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

你能尝试像这样为转换属性添加更多特定于供应商的内容吗，不确定 100% :D

#s_back {
    margin-left: 3.4vw;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%); /* IE 9 */
    -webkit-transform: translateY(-50%); /* Chrome, Safari, Opera */
    transform: translateY(-50%);
}