SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Location
    Porto,Portugal
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Center submit button

    How can i center a submit button in a page?

    CSS:
    Code CSS:
    .button
    {
      width: 150px;
      text-align: center;
      margin:0 auto;
     
    }

    HTML
    Code HTML4Strict:
     <input class="button" type="submit" value="Ok" />

    I have tried to put the button inside a <p> or <div> tag and it doesn´t work.
    The button is always align at left.
    My form has 3 floated collumns but i have add clear:both before putting the button.

  2. #2
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Put the {text-align: center;} on the block level parent, e.g.
    Code:
    <p id="submission"><input type="submit" value="OK"></p>
    ================
    #submission {
      text-align: center;
      }
    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hi, if you do want a width/auto margins that only works if you set it to a block element
    Adding display:block should fix it. Otherwise you could just add text-algign as recommended by gary.turner.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #4
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Location
    Porto,Portugal
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. It works.
    I was convinced that i had tried this before.


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
  •