Text Widget Centered vertically

  • Danielle

    (@daniellestraussmsncom)


    10 years, 3 months ago

    Hello,

    I have installed some custom social icons via the Arbitary Text Widget in the Header sidebar. I would like to know how to make them sit vertically centered please?

    <div id="sociallinks">
  <a href="https://www.linkedin.com/xxxx=$url$"
     target="_blank" title=Linkedin><img src=https://xxxx.png alt=Linkedin></a>

  <a href="https://www.facebook.com/xxxx=$url$"
     target="_blank" title=Facebook
><img src=https://xxxx.png alt=Facebook></a>

<a href="mailto:xxxx" title=Email><img src="https://xxxx.png" alt="Email" /></a>

</div>

    Please let me know if I have “messy code” as I’m learning and don’t want to be learning incorrectly.

    Thank you!

Viewing 5 replies - 1 through 5 (of 5 total)

  • Interesting… On my local copy of Vantage the text widget is automatically centered in the header. Vertically centering divs in an unknown height parent div can be fun. Can you provide a URL so we can see what is going on?

    Thread Starter Danielle

    (@daniellestraussmsncom)

    Thank you. Here it is:

    https://valormarketingdesign.com.au/

    Ok, maybe I’m not following… Viewing the site they appear to be centered vertically (equal top and bottom margins). Are you looking to stack them?
    0
    0
    0
    If that is the case I would code them as an unordered list:

    <ul id="sociallinks">
  <li><a href="https://www.linkedin.com/xxxx=$url$" target="_blank" title=Linkedin><img src=https://xxxx.png alt=Linkedin></a></li>

  <li><a href="https://www.facebook.com/xxxx=$url$" target="_blank" title=Facebook><img src=https://xxxx.png alt=Facebook></a></li>

  <li><a href="mailto:xxxx" title=Email><img src="https://xxxx.png" alt="Email" /></a></li>
</ul>

    Then add the following to your css:

    #sociallinks {
   list-style: none;
}

    Thread Starter Danielle

    (@daniellestraussmsncom)

    Well that’s interesting. I opened the page in IE and yes, they are vertically centered. Cleared cache etc and still I get the non centered result in my preview pages however pasting the link into a fresh chrome browser and it works fine.

    Thanks and sorry for wasting your time ??

    No worries! It happens to the best of us. ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Text Widget Centered vertically’ is closed to new replies.

Tags