Align textboxes differently in HTML - html

Question

How can I align a set of textboxes like it's shown on the following image:
I tried text align for the center,but can't get the side ones at the same time.
Thanks in advance.
Here's what I tried:
<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>
CSS:
.txtBoxMid
{
text-align:center;
}
.txtBoxLeft
{
text-align:left;
}
Tried a bunch of things. Nothing worked :(

Answer 1

I'd suggest using label elements to wrap the inputs, thereby containing the input element and its relevant text, and allowing a click on the text to focus the input:
<form action="#" method="post">
<label>Label text
<input />
</label>
<!-- other repeated elements removed for brevity -->
</form>
With the CSS:
/* 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 */
}
JS Fiddle demo.

Answer 2

use float or inline-block to accomplish that.

Answer 3

You can easily accomplish this by putting each form and label in a parent box and style that box with:
.aBox {
width: 33%;
float: left;
}
To center the content, just style the label box and the form box. E.G:
.label, .formParent {
text-align: center;
}
That will give you three columns. You then just keep adding boxes. For example:
<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>
Fiddle: http://jsfiddle.net/U69sh/