alignment - フォーム フィールドを中央に揃える

Question

各行に 2 つのフォーム フィールドが必要で、両方とも ab 架空の垂直中心線に対して、ラベルはできれば上に、それ以外の場合は中心から離れた両端に配置します。

一番近いのは How to align multiple form elements? です。

しかし、フィールドを真ん中に配置する必要があります。

手伝ってくれますか？

ありがとうございました

キム

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>