集中对齐表单域答案

【问题标题】：aligning form fields centrally集中对齐表单域
【发布时间】：2013-04-05 07:07:09
【问题描述】：

我需要在每行中的两个表单域都针对 ab 假想的垂直中心线，标签最好在顶部，否则在远离中心的每一端。

我最近来的地方是 How to align multiple form elements?

但我需要将字段放在中间。

你能帮忙吗？

谢谢

qim

PS - 如果这太含糊，我深表歉意，但我 10 天前才遇到 HTML/CSS，我有点迷茫。

【问题讨论】：

标签： alignment field

【解决方案1】：

试试这个可能对你有帮助：

<div style="width: 100%; text-align: center; height: 100px;">
    Label1
    <div>
        <input type="text" />
    </div>
    Label2
    <div>
        <input type="text" />
    </div>
</div>

你需要这样吗：

<div style="width: 100%; text-align: center; height: 100px;">
    Label1
    <div>
        <input type="text" style="margin-right:5px;">
        <input type="text" style="margin-left:5px;">
    </div>
    Label2
    <div>
        <input type="text" style="margin-right:5px;">
        <input type="text" style="margin-left:5px;">
    </div>
</div>

【讨论】：

您好，非常感谢。这给了我每行一个字段。我需要两个并排居中对齐，即在中间沿着虚构（或必要时真实）垂直活
太棒了！！！我认为它与如何对齐多个表单元素中的 css 一致？
对不起，我还没说完，消息就出错了。我试图更改 css 文件中的长度，但字段框保持不变。我还需要将文本放在每行上方，而不是在两行中间。或者，分别在框的右侧和左侧。
对不起，再次。我刚刚意识到 HTML 代码可以在没有 CSS 的情况下工作。但是如何更改框的长度和标签的位置？
好的，我搞定了。我现在需要的只是将盒子从中心稍微隔开一点；创建一些空白空间。

【解决方案2】：

<div style="width: 100%; text-align: center; height: 100px;">
    <div style="float: left; text-align: right; width: 47%;">
        Label1
    </div>
    <div style="float: left; text-align: left; width: 47%; margin-left: 6%;">
        Label2
    </div>
    <div>
        <input type="text" />
        <input type="text" />
    </div>
    <div style="float: left; text-align: right; width: 47%;">
        Label3
    </div>
    <div style="float: left; text-align: left; width: 47%; margin-left: 6%;">
        Label4
    </div>
    <div>
        <input type="text" />
        <input type="text" />
    </div>
</div>

或者干脆用这个：

<table style="width: auto; text-align: center; margin: 0 auto;">
    <tr>
        <td>
            Label1
        </td>
        <td>
            Label2
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" />
        </td>
        <td>
            <input type="text" />
        </td>
    </tr>
    <tr>
        <td>
            Label3
        </td>
        <td>
            Label4
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" />
        </td>
        <td>
            <input type="text" />
        </td>
    </tr>
</table>

【讨论】：

非常感谢格里。我在该页面上还有另一个问题，但也许我应该开始一个新帖子：我需要让我的提交按钮向我发送电子邮件并创建一个 fdatabase（在服务器中）以保留在字段中输入的数据
你好，史密斯。您使用什么作为后端。意味着您使用的是 Sql Server 还是 Mysql。另外请告诉我更多关于您的前端的信息。