在HTML中以不同方式对齐文本框

如何对齐一组文本框，如下图所示：

我尝试将文本对齐到中心，但无法同时对齐侧面

提前谢谢

以下是我尝试过的：

        <div  class = "txtBoxMid">

        Lorern Ipsum </br>

        <input type="text" name="name">

        </br>
        </br>

        Lorern Ipsum</br>

        <input type="text" name="name" >

        </br>
        </br>

        Lorern Ipsum</br>

        <input type="text" name="name">

        </div>

        <div class = "txtBoxLeft">
        Lorern Ipsum </br>

        <input type="text" name="name">

        </br>
        </br>

        Lorern Ipsum</br>

        <input type="text" name="name" >

        </br>
        </br>

        Lorern Ipsum</br>

        <input type="text" name="name">

        </div>

---

尝试了很多东西。什么都不起作用：（

使用

float

或

inline block

来完成这一点。

将每个表单和标签放在父框中，并使用以下样式设置该框：

.aBox {
    width: 33%;
    float: left;
}

要使内容居中，只需设置标签框和表单框的样式。例如：

.label, .formParent {
    text-align: center;
}

这将为您提供三列。然后继续添加框。例如：

<div class="aBox" id="num1">
    <div class="label">Hello.</div>
    <form class="formParent">
        <input type="text" class="field">
    </form>
</div>
<div class="aBox" id="num2">
    <div class="label">Hello 2.</div>
    <form class="formParent">
        <input type="text" class="field">
    </form>
</div>
<div class="aBox" id="num3">
    <div class="label">Hello 3.</div>
    <form class="formParent">
        <input type="text" class="field">
    </form>
</div>
<div class="aBox" id="num4">
    <div class="label">Hello 4.</div>
    <form class="formParent">
        <input type="text" class="field">
    </form>
</div>
<div class="aBox" id="num5">
    <div class="label">Hello 5.</div>
    <form class="formParent">
        <input type="text" class="field">
    </form>
</div>
<div class="aBox" id="num6">
    <div class="label">Hello 6.</div>
    <form class="formParent">
        <input type="text" class="field">
    </form>
</div>
<div class="aBox" id="num7">
    <div class="label">Hello 7.</div>
    <form class="formParent">
        <input type="text" class="field">
    </form>
</div>
<div class="aBox" id="num8">
    <div class="label">Hello 8.</div>
    <form class="formParent">
        <input type="text" class="field">
    </form>
</div>
<div class="aBox" id="num9">
    <div class="label">Hello 9.</div>
    <form class="formParent">
        <input type="text" class="field">
    </form>
</div>

你好
你好2。
你好3。
你好4。
你好5。
你好6。
你好，7号。
你好8。
你好，9号。

---

Fiddle:

我建议使用

标签

元素来包装

输入

s，从而包含

输入

元素及其相关文本，并允许单击文本以聚焦

输入

：

<form action="#" method="post">
    <label>Label text
        <input />
    </label>
    <!-- other repeated elements removed for brevity -->
</form>

---

.

请展示一些您尝试过的代码示例，或设置一个提琴。我很高兴您喜欢它！：）

<form action="#" method="post">
    <label>Label text
        <input />
    </label>
    <!-- other repeated elements removed for brevity -->
</form>

/* entirely aesthetic, adjust to taste */
form {
    width: 80%;
    margin: 0 auto;
}

label {
    display: inline-block; /* allows 'width' to be assigned and applied */
    width: 30%; /* to allow three elements per row */
    text-align: center; 
    margin: 0 1% 1em 1%; /* spacing, aesthetics, adjust to taste */
}

input {
    width: 80%; /* aesthetics, adjust to taste */
    margin: 0.5em auto;
    display: block; /* forces the input element to its own line */
}