如何使表格居中

发布于 2024-11-25 03:51:00 字数 722 浏览 2 评论 0原文

我有一个简单的表单...

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

see fiddle here

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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

夏九 2024-12-02 03:51:00

请参阅此处更新的 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;

不爱素颜 2024-12-02 03:51:00

使用 auto 作为包含表单元素(大概是表单)的左右边距。

form {
    width: 80%;
    border: solid black 1px;
    margin-left: auto;
    margin-right: auto;
}

如果没有宽度规范,表单将是其容器宽度的 100%。黑色边框可以让你很容易看到发生了什么。

更新的小提琴

Use auto for the left and right margin on something that encloses your form elements (presumably, the form).

form {
    width: 80%;
    border: solid black 1px;
    margin-left: auto;
    margin-right: auto;
}

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.

宣告ˉ结束 2024-12-02 03:51:00

您可以将表单放入居中的容器中。

在这种情况下,表单元素向左(或向右)浮动,您只需在容器上应用水平定位。

示例此处

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

千秋岁 2024-12-02 03:51:00

这可能会有所帮助:

HTML:

<div>
<form>
<label>bla</label>
<input />
...
</form>
</div>

CSS:

div {margin:0 auto;}
form {width:200px;}
input {float:right;}

This may help:

HTML:

<div>
<form>
<label>bla</label>
<input />
...
</form>
</div>

CSS:

div {margin:0 auto;}
form {width:200px;}
input {float:right;}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文