SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Align checkbox vertically

    Hi,

    I am trying to align a checkbox to a button vertically and I tried using margin but it doesn't work.

    Here is my code:

    HTML Code:
    <input type="checkbox" style="margin-top: 2px" /> <button type="button" style="cursor: pointer; width: 80px; padding: 2px 0 3.5px 0; font-size: 13px">Button</button>
    I am basically trying to move the checkbox about 2px down.

    Thanks for any help.

  2. #2
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    EDIT: I guess I should have used the word "horizontally". I was thinking about how "vertical-align" property works.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    You might end up chasing your tail a bit on this. Some browsers align these vertically by default, so if you start to add margins for the sake of one browser, others might get thrown off. Is there a particular browser this is not working in?

  4. #4
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In Firefox and Chrome, it is not aligned and it is above the middle horizontal line of the button by the same amount. So, moving it down like 2px is what I want to accomplish. In my code, the top margin has no effect on the checkbox and I don't know why.

    EDIT: When I add "float: left" to the checkbox, the margin worked. I still don't know why it doesn't work without the float.


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
  •