如何在 css 中将此表单居中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8097744/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I center this form in css?
提问by johnny
I have tried everything. I cannot get this centered on the screen. I am using ie 9 but it does the same in chrome. It just sits on the left of the webpage. Thank you for any help.
我已经尝试了一切。我无法将其居中显示在屏幕上。我正在使用 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>
回答by Aleks Dorohovich
Another way
其它的办法
body {
text-align: center;
}
form {
display: inline-block;
}<body>
<form>
<input type="text" value="abc">
</form>
</body>回答by orfdorf
- Wrap your form in a div.
- Set the div's display to block and text-align to center (this will center the contained form).
- Set the form's display to inline-block (auto-sizes to content), left and right margins to auto (centers it horizontally), and text-align to left (or else its children will be center-aligned too).
- 将您的表单包装在一个 div 中。
- 将 div 的显示设置为 block 并将 text-align 设置为居中（这将使包含的表单居中）。
- 将表单的显示设置为 inline-block（根据内容自动调整大小），将左右边距设置为自动（水平居中），将 text-align 设置为左对齐（否则其子项也将居中对齐）。
HTML:
HTML：
<div class="form">
<form name="Form1" action="mypage.asp" method="get">
...
</form>
</div>
CSS:
CSS：
div.form
{
display: block;
text-align: center;
}
form
{
display: inline-block;
margin-left: auto;
margin-right: auto;
text-align: left;
}
回答by Cory Danielson
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 */
?
?
Works & tested in Chrome/IE/FF
在 Chrome/IE/FF 中工作和测试
回答by tmjam
You can try
你可以试试
form {
margin-left: 25%;
margin-right:25%;
width: 50%;
}
Or
或者
form {
margin-left: 15%;
margin-right:15%;
width: 70%;
}
回答by Peter Stuart
Try adding this to your css
尝试将此添加到您的 css
.form { width:985px; margin:0 auto }
and add width:100% to the body tag
并添加 width:100% 到 body 标签
Then put:
然后放：
<div class="form">
before the tag.
在标签之前。
回答by Superhitmandan
i dont know if the full resolution has been made for this yet. i know that from doing a 2 column page with fixed left side bar, to get a contact us form centered on my page i put the following:
我不知道是否已经为此做出了完整的决议。我知道通过做一个带有固定左侧栏的 2 列页面，为了获得一个以我的页面为中心的联系我们表单，我输入了以下内容：
form {
width: 100%;
margin-left: auto;
margin-right: auto;
display: inline-block;
}
this worked for me so thought id throw in my resolution to the same problem
这对我有用所以我认为我解决了同样的问题
回答by Alan Ihre
You can use the following CSS to center the form (note that it is important to set the width to something that isn′t 'auto' for this to work):
您可以使用以下 CSS 使表单居中（请注意，将宽度设置为不是“自动”的内容很重要）：
form {
margin-left:auto;
margin-right:auto;
width:100px;
}
回答by mike
I css I got no idea but I made that just by centering the form in html something like this:
我的 css 我不知道，但我只是通过在 html 中居中表单来做到这一点，如下所示：
in css:
在 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;}
then in html:
然后在 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>
This will center the form, and the content will be in the left of the centered form.
这将使表单居中，内容将位于居中表单的左侧。
回答by Sharm
body {
text-align: center;
}
form {
width:90%;
background-color: #c0d7f8;
}<body>
<form>
<input type="text" value="abc">
</form>
</body>回答by user12325458
<!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>