WordPress.org

Forums

Vantage
Text Widget Centered vertically (6 posts)

  1. Danielle
    Member
    Posted 9 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=http://xxxx.png alt=Linkedin></a>
    
      <a href="https://www.facebook.com/xxxx=$url$"
         target="_blank" title=Facebook
    ><img src=http://xxxx.png alt=Facebook></a>
    
    <a href="mailto:xxxx" title=Email><img src="http://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!

  2. Justin "WP Guru" Hemker
    Member
    Posted 9 months ago #

    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?

  3. Danielle
    Member
    Posted 9 months ago #

    Thank you. Here it is:

    http://valormarketingdesign.com.au/

  4. Justin "WP Guru" Hemker
    Member
    Posted 9 months ago #

    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=http://xxxx.png alt=Linkedin></a></li>
    
      <li><a href="https://www.facebook.com/xxxx=$url$" target="_blank" title=Facebook><img src=http://xxxx.png alt=Facebook></a></li>
    
      <li><a href="mailto:xxxx" title=Email><img src="http://xxxx.png" alt="Email" /></a></li>
    </ul>

    Then add the following to your css:

    #sociallinks {
       list-style: none;
    }
  5. Danielle
    Member
    Posted 9 months ago #

    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 :)

  6. Justin "WP Guru" Hemker
    Member
    Posted 9 months ago #

    No worries! It happens to the best of us. ;)

Reply

You must log in to post.

About this Theme

About this Topic