CODEWITHSUNDEEP
htmlcss
algorithmicCoder
algorithmicCoder

Reputation: 6789

How do I center this form-button block?

I want this form band button to line up horizontally and to sit as a whole in the horizontal center of the page.

How do I set my css?

<form action="signup.php" method="post">
         <fieldset>
          <label>Email: <label>
          <input type="text" name="email" id="email" placeholder='email address' />
          <input type="submit" value="Sign Up" class= "button" />
          </fieldset>
          </form>

Upvotes: 0

Views: 1659

Answers (3)

Justin Carlson
Justin Carlson

Reputation: 2710

Plenty of ways to tackle this. Here is one solution. Though, I do recommend not using inline styles, but here is your form with the CSS.

<form action="signup.php" method="post" style="margin: 0 auto; width: 350px;">
  <fieldset>
    <label>Email: <label>
    <input type="text" name="email" id="email" placeholder='email address' />
    <input type="submit" value="Sign Up" class= "button" />
  </fieldset>
</form>

Upvotes: 3

k to the z
k to the z

Reputation: 3185

I would wrap your inputs in a div and set the div to display:inline in your css. In your css also target your form and set that to margin:auto

Upvotes: 1

Scherbius.com
Scherbius.com

Reputation: 3414

something like this:

<div style="width: 300px; margin-left: auto; margin-right:auto;">
    <form action="signup.php" method="post">
         <fieldset>
          <label>Email: <label>
          <input type="text" name="email" id="email" placeholder='email address' />
          <input type="submit" value="Sign Up" class= "button" />
          </fieldset>
      </form>
</div>

Upvotes: 0

Related Questions