alignment - 集中对齐表单域

Question

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

最近我来的是 如何对齐多个表单元素？

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

你能帮我吗？

谢谢

齐姆

PS - 如果这太模糊了，我很抱歉，但我 10 天前才遇到 HTML/CSS，我有点迷茫。

Answer 1

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

Answer 2

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

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