Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jun 2010
    Posts
    26
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Formatting input button text

    I'm trying to reduce the height of input buttons, but am unable to center the text vertically. Tried every css trick I know, but the text is still too low (I can make it lower :P). Any way to do this?

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,184
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    Did you try just changing the font-size??? Say to xx-small? Is that still not small enough?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,184
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    Or how about this?
    Code:
    <html>
    <head>
    <style type="text/css">
    a.pseudoButton {
        height: 16px; 
        font-family: arial; 
        font-size: xx-small; 
        border: solid 1px black; 
        background-color: #eeeeee; 
        padding-left: 3px; padding-right: 3px;
        text-decoration: none;
        cursor: hand;
    }
    
    </style>
    </head>
    <body>
    <form>
    <a class="pseudoButton">Push Me</a>
    </form>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    New Coder
    Join Date
    Jun 2010
    Posts
    26
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I reduced the default button height to 20px, and used a smaller font, but it's shifted down, not centered vertically. I can push it further down with padding, but can't reduce the top padding (top margin) within the button. It's centered horizontally without any help.

  • #5
    New Coder
    Join Date
    Jun 2010
    Posts
    26
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Did you try just changing the font-size??? Say to xx-small? Is that still not small enough?
    Dang, that was so simple, I missed it.

    Yes, changing the font-size from default (10pt) to 8pt reduces the button height and text is centered both ways.

    Thanks!


  •  

    Posting Permissions

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