Centering a title and image in ion-nav-title

1

Hi,

I’m using the ion-nav-title and in it I have both a title and a image, like this:

<ion-nav-title >
    <img src="../assets/img/logo.png" />
    <span>Inductions</span>
</ion-nav-title>

But when I look at the header, the text is at the base line of the header bar next to the image. I would like to have a bit of spacing so the text sits in the middle of the header.

As you can see I have put a SPAN around the text which I’ve tried to add styling to in order to move it off the bottom of the header, but nothing seems to work.

Anyone managed to get it so a image and a title can be display in the header with the text in the middle of the bar.

Thanks

Stephen

2

have you tried line-height?

3

Yep, just tried that, has no effect.

4

did you try to add some class to the span element and then play with its height or paddings?

5

Yes, I added the span just for that reason, but seems to have no effect.

6

Can you show the styles of this element in browser?

7

Yes, I’m building this in the browser at the moment. So when I add both padding and margin to the span around the title, there is more space added between the image and the text, but the margin and padding at the bottom does not seem to move the text up.

8

may be screenshot with styles?)))

9

Oh, yes sorry, that’ll help

image
image.jpg1259×898 133 KB

10

try to use margin-top: -20px; or position: relative; with top: -20px;

11

try adding height:100% to span and then line-height

12

This worked, with a top of -10px; the text now sits nicely in the middle of the title bar. Seems a bit hacky, but has the effect I want.

13

I’ll give this a go as well see what effect it has.

14

It is just css styles)))

2 Likes