vertical align text and image in ionic header

0
votes

I have this code to align the title and image in the ionic header bar:

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%);
}

Markup

  <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>

It looks soso in the browser:

enter image description here

And like this on the device:

enter image description here

What is my mistake? Here is a ionic play: 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

1
htmlcssionic-framework
Set CSS for #s_back_img as height: 100%;. - Harish Kommuri
i have to decrease the size of the image. Now it's height: 6.7vw; - olivier
Default height of bar in ionic is 44px. So, set image height to 44px. - Harish Kommuri
i have to use a custom height for the header bar. - olivier
Then set height of the bar as height of the img - Harish Kommuri

1 Answers

1
votes

@Oliver: I have checked your code and saw the style for s_back

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

Can you try to add more vendor specific for transform property like so, not sure 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%);
}