Search code examples
htmlcsscentercentering

How can I center the below form?

How can I center the below form. Right now it is too far over to the right. I want it centered on the page (Moved slightly over to the left). I have tried a lot of different solutions however, I know I am missing something very small here. Thank you.

enter image description here

![<!DOCTYPE HTML>
<head>
<title>Page | Contact</title>
<meta charset="utf-8">
<!-- Google Fonts -->
<link rel='stylesheet' type='text/css' href='css/font.css'/>
<!-- CSS Files -->
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/simple_menu.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/slider.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/contact.css">

<!-- Contact Form -->
<link href="contact-form/css/style.css" media="screen" rel="stylesheet" type="text/css">
<link href="contact-form/css/uniform.css" media="screen" rel="stylesheet" type="text/css">
<script src="js/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js"></script>
<script src="js/contact.js"></script>
<?php include 'common_header.php'; ?>

</head>
<body>
<?php
    include 'header.php';
?>
<div id="container">
  <div class="one-third"> &nbsp; </div>
  <div class="one-third">
    <div class="heading_bg">
      <h2>Contact Us</h2>
    </div>
    <form action="#" id="contact_form" class="TTWForm" method="post">
      <div id="field1-container" class="field f_100">
        <label class="required" for="name">Name</label>
        <input name="name" id="name" type="text">
        <span id="name_validation" class="error_message"></span>
      </div>
      <div id="field2-container" class="field f_100">
        <label class="required" for="subject">Subject</label>
        <input name="subject" id="subject" type="text">
        <span id="subject_validation" class="error_message"></span>
      </div>
      <div id="field5-container" class="field f_100">
        <label class="required" for="email">Email</label>
        <input name="email" id="email" type="email">
        <span id="email_validation" class="error_message"></span>
      </div>
      <div id="field4-container" class="field f_100">
        <label class="required" for="message">Message</label>
        <textarea rows="5" cols="20" id="message" name="message"></textarea>
        <span id="message_validation" class="error_message"></span>
      </div>
      <div id="form-submit" class="field f_100 clearfix submit">
        <input value="Submit" type="submit" id="submit_button">
      </div>
    </form>
  </div>
  <div class="one-third last">
  </div>
  <div style="clear:both; height: 0px"></div>
</div>
<!-- close container -->
<?php
    include('footer.php');
?>
</body>
</html>][2]

CSS

#after_submit, #email_validation, #name_validation {
    display:none;
}

#after_submit{
    background-color: #c0ffc0;
    line-height: 31px;
    margin-bottom: 10px;
    padding-left: 20px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

#after_submit{
    color: #6c6c6c;
}

.error {
  background-color:#FFDFDF;
  color:red;
}
.error_message{
  font-style: italic;
  font-size: 10px;
}
.row {
  margin:5px;
}
Solution

  • This should do the trick for you:

    #contact_form{
    width:50%;
    margin-left:auto;
    margin-right:auto;
}

    Check the fiddle here

    I have not added all your CSS, only showed how you can center the form. Using the CSS above in your code, you would be able to center it.

    You can put the form in a div and use css on the div or use for the form. Set width accordingly, but the margin-left and right when set to auto, put it into center of the screen, no matter what the screen size is.

    If this doesnt work, then create a jsfiddle with all your relevant css and html and comment.