CODEWITHSUNDEEP
htmlcssionic-framework
olivier
olivier

Reputation: 2645

vertical align text and image in ionic header

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

Upvotes: 0

Views: 869

Answers (1)

trungvose
trungvose

Reputation: 20034

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

Upvotes: 1

Related Questions