Question

我如何将下面的表格集中在一起。现在它太过分了。我希望它集中在页面上（略微向左移动）。我尝试了很多不同的解决方案，但我知道我在这里缺少一些非常小的东西。谢谢。

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;
}

Answer 1

这应该适合你：

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

Check the fiddle here

我没有添加所有CSS，只显示了如何将表单集中在一起。在代码中使用上面的CSS，您将能够集中它。

您可以将表单放在div中并在div上使用css或用于表单。相应地设置宽度，但设置为自动时左右边距，无论屏幕尺寸如何，都将其置于屏幕中央。

如果这不起作用，那么创建一个包含所有相关css和html以及评论的jsfiddle。

Answer 2

这应该可以解决问题。可能必须使用宽度和边距，但只要它们加起来100％，你应该没问题。

#contact_form, .heading_bg {
    display: block;
    position: relative
    width: 50%;
    margin: 0 25%;
    padding: 0;
}

这至少会使你的主要中心居中。然后，只需要使用内部div和输入设置来获取您喜欢的内容。

我如何将下面的表格集中在一起？

2 个答案: