Question

我想将带有背景的表单居中到页面中心，我该怎么做呢？我似乎无法找到一种方法，可以使用表单元素将其正确放置在屏幕中间。

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

Answer 1

为您的左侧和右侧提供自动边距。

  #content{
    margin:0px auto
  }

Answer 2

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

添加

margin-left:auto; margin right:auto

以及表单内的内联样式

我有一个带背景的表单如何在页面中居中？

2 个答案: