CODEWITHSUNDEEP
htmlcssstylesheet
Spike Lee
Spike Lee

Reputation: 411

How to centre input text box HTML?

I have a form and I want to centre the text boxes and label to the middle. How can I do this? (I would have thought aligning the left and right to auto would do it but it doesn't work). This is my code:

<body>
    <div id="formWrapper">
          </center>
          <form method ="post" action="addMember.php">
          <label for="name">Username:</label>
          <input name="name"/>
          <label for="password">Password:</label>
          <input name="password"/>
          <label for="email">Email:</label>
          <input name="email"/>
            <p>
            <fieldset>
            <input class="btn" name="submit" type="Submit" value="Register"/>
            <input class="btn" name="reset" type="reset" value="Clear Form">
            </fieldset>
      </form>
    </div>
</body>

The style:

#formWrapper{
    width:550px;
    padding: 2em 0 2em 0;
    border:solid 5px #F1F1F1;
    margin-top: 100px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    background-color: #AFC8DE;
}

Upvotes: 4

Views: 43463

Answers (5)

Rio A.P
Rio A.P

Reputation: 1395

add align="center" to your form

div id="formWrapper">
        <form method ="post" action="addMember.php" align="center">
            <label for="name" >Username:</label>
            <input name="name"/>
            <p>
            <label for="password">Password:</label>
            <input name="password"/>
            <p>
            <label for="email">Email:</label>
            <input name="email"/>
            <p>
            <fieldset>
                <input class="btn" name="submit" type="Submit" value="Register"/>
                <input class="btn" name="reset" type="reset" value="Clear Form">
            </fieldset>
        </form>
    </div>

here the output

Upvotes: 1

greb22
greb22

Reputation: 11

I took this code and tried out adarshr answer and it does center the form. Chris is also right the semantics are very important here because after seeing it I feel like this might not be exactly what you were looking for. Another point I wanted to add to this to someone reading this who is probably a beginner is that when you add text-align: center; it needs to go in the css file and end with a ;

Upvotes: 0

Er.gaurav soni
Er.gaurav soni

Reputation: 157

    border: 1px solid gray;
    border-radius:5px;
    color: #393939;
    height: 30px;
    padding: 0px 6px 0 6px;
    width: 186px;

Upvotes: 0

kleinohad
kleinohad

Reputation: 5912

take a look at this: http://jsfiddle.net/7auS8/

Upvotes: 1

Chris
Chris

Reputation: 3795

If you apply text-align: center to the form it will place the fields in the center.

Semantics are important here, so take a look at an accessible approach to forms. http://www.alistapart.com/articles/prettyaccessibleforms

Upvotes: 5

Related Questions