SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Git-R-Done
    Join Date
    Nov 2001
    Posts
    1,194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Vertically aligning a submit button next to a select

    I've tried many different methods (padding, margin, vertical-align, etc.) but nothing seems to work good across all browsers. Does anyone know what the best way to vertically align a submit button next to a select menu? I would like them to match up so he button doesn't appear several pixels below the center of the submit button.
    John Saunders

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would specify the vertical-align property for both elements. How do you want them aligned? Do you want the vertical-centers of the two elements to be even?
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    Git-R-Done
    Join Date
    Nov 2001
    Posts
    1,194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, I would like the vertical centers of the two elements to be even. The problem is that it may look fine in say Firefox and Safari but in IE 6+ they don't match up.
    John Saunders

  4. #4
    SitePoint Zealot Shpook's Avatar
    Join Date
    May 2007
    Location
    Hollywood, FL, USA
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I usually have success using line-height and height with matching values. For example:

    .select {line-height:1.3em; height:1.3em;}
    .submit {line-height:1.3em; height:1.3em;}

    This will keep everything vertically aligned, even with text resizing.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •