I'm working with a form and I'm having an issue getting it centered. I've tried using a DIV tag but with no success, I'm hoping someone can point me in the right direction. Here's my current code:

<h2 class="extra">Submit <span>Application</span></h2>

<form action="upload.php" method="post" enctype="multipart/form-data">

<input type="file"  name="ufile" />
<input type="submit" value="Upload" />

</form>

There are two options. You can center the entire form or just the elements inside of it.


Option 1~

<div id="wrapper">
<h2 class="extra">Submit <span>Application</span></h2>
 
<form action="upload.php" method="post" enctype="multipart/form-data">
 
<input type="file"  name="ufile" />
<input type="submit" value="Upload" />
 
</form>
</div>
#wrapper {
    text-align: center;
}

This will center all of the elements inside of the form.

Option 2~

<div id="wrapper">
<h2 class="extra">Submit <span>Application</span></h2>

<form action="upload.php" method="post" enctype="multipart/form-data">

<input type="file"  name="ufile" />
<input type="submit" value="Upload" />

</form>
</div>
#wrapper {
    margin: 0 auto;
    width: 350px;
    border: 1px solid #000;
}

This will center the div. The width is required for margin: 0 auto; to work.

Regards, Arkinder

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.