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

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.

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

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

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

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>

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.

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.

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

That's great to hear and you're very welcome :)