如何使表格居中
我有一个简单的表单...
<label>name</label><input type="text" id="name">
<label>email address</label><input type="text" id="email">
这是到目前为止的 CSS;输入元素根据需要垂直排列。
<div>
<label>name</label>
<input type="text" id="name">
</div>
<div>
<label>email address</label>
<input type="text" id="email">
</div>
div
{
padding: 5px;
}
label
{
display: block;
width: 100px;
float: left;
}
问题是我希望我的表单在页面上居中。如何使浮动元素居中(或者如何在不浮动的情况下对齐)?
必须适用于所有浏览器,包括 IE6。
I have a simple form...
<label>name</label><input type="text" id="name">
<label>email address</label><input type="text" id="email">
Here is the CSS so far; the input elements line up vertically, as desired.
<div>
<label>name</label>
<input type="text" id="name">
</div>
<div>
<label>email address</label>
<input type="text" id="email">
</div>
div
{
padding: 5px;
}
label
{
display: block;
width: 100px;
float: left;
}
The problem is that I want my form centered on the page. How can I center with floated elements (or alternatively how to align without floating)?
Must work in all browsers, IE6 included.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
请参阅此处更新的 Fiddle: http://jsfiddle.net/XpjYJ/7/
我将您的 html 放入其中一个分区。然后我给 div 一个固定的宽度,并将边距设置为
margin: 0 auto;
See updated Fiddle here: http://jsfiddle.net/XpjYJ/7/
I placed your html inside a div. I then gave the div a fixed width, and set the margin to
margin: 0 auto;
使用
auto
作为包含表单元素(大概是表单)的左右边距。如果没有宽度规范,表单将是其容器宽度的 100%。黑色边框可以让你很容易看到发生了什么。
更新的小提琴。
Use
auto
for the left and right margin on something that encloses your form elements (presumably, the form).Without the width specification, the form will be 100% of the width of its container. The black border just makes it easy to see what's going on.
An updated fiddle.
您可以将表单放入居中的容器中。
在这种情况下,表单元素向左(或向右)浮动,您只需在容器上应用水平定位。
示例此处
You can put your form in a centered container.
In this case, the form elements are floated left (or right) and you only need to apply the horizontal positioning on the container.
example here
这可能会有所帮助:
HTML:
CSS:
This may help:
HTML:
CSS: