external image vertical alignment?

  • Author
    Posts
  • #1620077

    newlyweb
    Member

    Scroll down in this page
    http://newlyweb.wordpress.com/paypal-demo/

    Note the two “buy now” buttons are lower than the text on the same line. I tried adding “style=vertical-alignment: middle” or “style=vertical-alignment: -50%” to the img tag of the button, which is hosted on paypal web site.

    Neither one works. They seem to have an effect in the visual preview, but no effect when viewed in an external browser.

    How do I align the button so that it is middle aligned with the text?

    I tried in three browsers with the same result. Here is the code of the line in question:

    <a title="pay" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=PC72FEZ2Y2AXA" target="_blank">1 demo session $45 </a><a title="pay" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=PC72FEZ2Y2AXA" target="_blank"><img style="vertical-align: middle; border: 0;" alt="" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynow_LG.gif" /></a>

    The blog I need help with is newlyweb.wordpress.com.

    #1620205

    justpi
    Member

    To really understand such situations you need to examine the CSS of the elements. Setting the v.a. of the icons to middle would work if the CSS of the theme specified the same alignment for the links (which it doesn’t) and if the images didn’t have a default top margin. Instead of overriding all these, it’s simpler to nudge the icons up by setting a negative top margin, or by adjusting the v.a. using a value rather than one of the standard words:
    <img style="vertical-align:-.4em;border:0;"

The topic ‘external image vertical alignment?’ is closed to new replies.