Question

我已经尝试了一切。我无法将这个集中在屏幕上。我正在使用ie 9但它在chrome中也是如此。它只是位于网页的左侧。谢谢你的帮助。

<style type="text/css">

body {
    margin:50px 0px; padding:0px;
    text-align:center;
    align:center;
}
label,input {
 display: block;
 width: 150px;
 float: left;
 margin-bottom: 10px;
}

label {
 text-align: right;
 width: 75px;
 padding-right: 20px;
}

br {
 clear: left;
}



    </style>
</head>


<body>

 <form name="Form1"  action="mypage.asp" method="get">

 <label for="name">Name</label>
 <input id="name" name="name"><br>

 <label for="address">Address</label>
 <input id="address" name="address"><br>

 <label for="city">City</label>
 <input id="city" name="city"><br>
 <input type="submit" name="submit" id="submit" value="submit" class="button" />

</form>
</body>

Answer 1

另一种方式

body {
    text-align: center;
}
form {
    display: inline-block;
}

<body>
  <form>
    <input type="text" value="abc">
  </form>
</body>

Answer 2

body { text-align: center; }
     /* center all items within body, this property is inherited */
body > * { text-align: left; }
     /* left-align the CONTENTS all items within body, additionally
        you can add this text-align: left property to all elements
        manually */
form { display: inline-block; }
     /* reduces the width of the form to only what is necessary */

http://jsfiddle.net/sqdBr/4/

作品＆amp;在Chrome / IE / FF中测试

Answer 3

将表格包裹在div中。
将div的显示设置为block并将text-align设置为center（这将使包含的表单居中）。
将表单的显示设置为内嵌块（自动调整大小为内容），左右边距设置为自动（水平居中），文本调整为左侧（否则其子项将位于中心位置）也是对齐的。）

HTML：

<div class="form">
    <form name="Form1" action="mypage.asp" method="get">
        ...
    </form>
</div>

CSS：

div.form
{
    display: block;
    text-align: center;
}
form
{
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

Answer 4

你可以尝试

form {
    margin-left: 25%;
    margin-right:25%;
    width: 50%;
}

或

form {
    margin-left: 15%;
    margin-right:15%;
    width: 70%;
}

Answer 5

尝试将此添加到您的css

.form { width:985px; margin:0 auto }

并将宽度：100％添加到body标记

然后把：

<div class="form">

标签前的

。

Answer 6

我不知道是否已为此做出全部决议。我知道，从一个带有固定左侧栏的2栏页面，以我的页面为中心的联系我们表格，我提出以下内容：

    form {
 width: 100%;
 margin-left: auto;
 margin-right: auto;
 display: inline-block;
 }

这对我来说很有用，所以我想在同一个问题上解决这个问题

Answer 7

我在网上找到的最佳解决方案是使用绝对定位。

_label = Framework.Open("c:\\temp\\inventory.label");
_label.SetObjectText("part_num", txtPartNumber.Text);
_label.SetObjectText("serial_num", txtSerialNum.Text);
_label.Print("DYMO LabelWriter 450");

Answer 8

您可以使用以下CSS将表单置于中心位置（请注意，将宽度设置为“auto”以使其工作非常重要）：

form {
   margin-left:auto;
   margin-right:auto;
   width:100px;
}

Answer 9

我知道我不知道但我只是通过在html中居中表单来实现这一点像这样的东西：

在css中：

form.principal {width:12em;}    
form.principal label { float:left; display:block; clear:both; padding:3px;}
form.principal input { float:left; width:8em;}
form.principal button{clear:both; width:130px; height:50px; margin-top:8px;}

然后在html：

<center><form class="principal" method="POST">
<fieldset>
<p><label for="username">User</label><input id="username" type="text" name="username" />
<p><label for="password">Password</label><input id="password" type="password" name="password" /></p>
<button>Log in</button>
</fieldset>
</form></center>

这将使表单居中，内容将位于居中形式的左侧。

Answer 10

body {
    text-align: center;
}
form {
    width:90%;
    background-color: #c0d7f8;
}

<body>
  <form>
    <input type="text" value="abc">
  </form>
</body>

Answer 11

你可以试试这个代码作为你的“body”标签，随心所欲地改变它..

body {
    display: flex;
    justify-content: center;
    margin-top: 5%;
    align-items: center;
}

Answer 12

通常，如果您在stackoverflow上查找任何软件问题，就会迅速找到明确的答案。但是在CSS中，即使是像“将表单居中”这样的简单操作，也会导致冗长的讨论，并导致许多失败的解决方案。

更正：orfdorf的解决方案（上面）有效。

Answer 13

<!DOCTYPE html>
<html>
<head>
    <title>Private</title>

    <!-- local links -->
<style>


body{
    background-color:#6e6969;
    text-align:center;
}
body .form_wrapper{

    display:inline-block;
    background-color: #fff;
    border-radius: 5px;
    height: auto;
    padding: 15px 18px;
    margin: 10% auto;
    margin-left: auto;
    margin-right: auto;
} 
</style>
</head>
<body>
    <div class = "form_wrapper">
        <form method="post" action="function.php">
            <h1 class = "formHeading">Admin login form</h1>
            <input type = "text" name = "username" id = "username"placeholder = "Enter Username" required = "required">
            <input type = "password" name = "password" id  = "password" placeholder = "Enter password" required = "required">
            <button type = "submit" >Login</button>
            <a href = "#"> froget password!</a>
            <a href = "#"><span>?</span>help</a>
        </form>

    </div>
</body>


</html>

Answer 14

我遇到了同样的问题（我使用谷歌）我所做的是在表单中添加了 align 属性

<form align="center">
   <!--Stuff-->
</form>

这是一种解决方案

如何将此表单置于css中心？

14 个答案: