Question

我需要在每条线上对着ab虚构的垂直中心线两个表格字段，标签最好在顶部，否则在远离中心的每一端。

我最近的人来了 How to align multiple form elements?

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

你可以帮忙吗？

谢谢

QIM

PS - 我很抱歉，如果这太模糊了，但我10天前只遇到过HTML / CSS而且我有点迷失。

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

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

集中对齐表单字段

2 个答案: