[Resolved] How to centre text against image within a text widget in the Header

[Toby]

Trying to add a ‘follow us on facebook’ text in the header with a clickable image of the facebook icon next to it. I am using the Text widget in the header to achieve this.
How can I get the text to be centre aligned vertically against the facebook icon?

[David]

Hi there,

can you share a link to the site? You can edit your original post and add it to the Site URL to share privately.

[Toby]

The preview site URL is http://87.106.182.70/plesk-site-preview/wellshurst.com/87.106.182.70/

[David]

Hi,

i would probably use this type of mark-up, updated accordingly:

<div class="vertical-align">
    <span>Follow us on </span>
    <a href=""><img src="image_url.jpg"></a>
</div>

and this CSS:

.vertical-align {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    line-height: 100%;
}

[Toby]

Thank you for your reply – it is nearly there but the text is not quite centred against the facebook logo.

[David]

OK the widget seems to have lost the span tag. Can you copy the code you have and add it a Custom HTML widget instead. And then wrap the text like so <span>Follow us on </span>

[Toby]

David – then span text is there now but the text is still not centred on the visible icon – I think it is the resized facebook icon is being display 32 x 32 but is using the space of 32 x 38 – so should I jest recreate the icon be be 32 x 32?

Also the space between the Header text widget and Header Custom HTML seems to have widened – what do I do to make them closer. Thank you.

[David]

I updated the code above, with the addition of the line-height property.
Then once that is done you can cut the text from the text widget and add that to the custom HTML widget, before the first <div> – this will get rid of the additional widget margin space.

[Toby]

David – Thank you for your assistance – it is now how I want it.
Kind Regards

[David]

That’s great to hear and you’re very welcome 🙂

[Author]

Posts