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

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

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

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #615068
    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?

    GeneratePress 2.1.3
    #615073
    David
    Staff
    Customer Support

    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.

    #616024
    Toby
    #616534
    David
    Staff
    Customer Support

    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%;
    }
    #616581
    Toby

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

    #616585
    David
    Staff
    Customer Support

    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>

    #616605
    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.

    #616608
    David
    Staff
    Customer Support

    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.

    #616613
    Toby

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

    #616616
    David
    Staff
    Customer Support

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

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.