-1

I want to center a form with a background to the center of the page, how can I go about doing that? I can't seem to find a way to properly place it in the middle of the screen with the form elements.

<div id="content" style="background-color: #e7e7e7;text-align: center; width:100%; height: 1000px; top: 360px; left:0px; padding-top: 100px; position: absolute; overflow: hidden;">
<form id="contact-form" action="contact.php" method="post" style="padding-top: 100px; list-style-type: none; text-align: center; width: 916px; height:660px;  background-image:url('../images/contact.png'); background-repeat: no-repeat;">
    <input type="hidden" name="redirect" value="/sent" />
    <ul>
        <li>
            <input type="text" name="name" class="name" value="" /> 
        </li>

        <li>
         <input type="text" name="company" class="company" value="" />
        </li>
    </ul>
</form>
</div>
Julian Camilleri
  • 2,975
  • 1
  • 25
  • 34
  • 2
    What is your current CSS and HTML ? Try to make a [jsFiddle](http://jsfiddle.net/) – Brewal Apr 02 '14 at 10:17
  • Is there any reason why you put the whole CSS in the HTML rather than a separated .css file ? – Brewal Apr 02 '14 at 10:23
  • possible duplicate of [How to center a div in a div - horizontally?](http://stackoverflow.com/questions/114543/how-to-center-a-div-in-a-div-horizontally) – Brewal Apr 02 '14 at 10:24

2 Answers2

0

Give the margin auto for your left and right sides. 

  #content{
    margin:0px auto
  }
Ankur Aggarwal
  • 2,993
  • 5
  • 30
  • 56
0
<form id="contact-form" action="contact.php" method="post" 
style="padding-top: 100px; list-style-type: none; text-align: center; 
width: 916px; height:660px;  background-image:url('../images/contact.png'); 
background-repeat: no-repeat;"></form>

add

margin-left:auto; margin right:auto

along with the inline style inside form

Blu
  • 4,036
  • 6
  • 38
  • 65
Jijo Lopez
  • 36
  • 4