Ion-title image and text vertically aligned

Ionic Framework Ionic Angular
1

Can someone please help me figure out the CSS I need to vertically align the image and text in this toolbar? I’ve found a few examples here and in other places but none seem to work for me. This particular image is 36 pixels high, so just a little bigger than the text.

 <ion-toolbar >          
      <ion-title><img src="assets/icon.png" /> Portal</ion-title>
</ion-toolbar>
2

Not sure if this works, can you make the wrapper 36px high and change the line height of the text also to 36px see if that works? Otherwise maybe convert the plain text to a block element so that you can change its own height?

3

I used ion-row and ion-col to get this to work.
you can use the ion-align-items-center on the ion-row to vertically align columns, and then you just have to adjust the padding on the actual title text. Hope this helps!

<ion-toolbar>
    <ion-title>
        <ion-row class="ion-align-items-center">
            <ion-col size="2">
                <img src="assets/icon.jpg" />
            </ion-col>
            <ion-col size="10" class="title-col">
                 Portal
            </ion-col>
        </ion-row>
    </ion-title>
</ion-toolbar>

css:

.title-col {
    padding-top: unset;
}
1 Like
4

I’ll give that a try, thanks. I was hoping for just a pure CSS approach that takes care of this.