Question

I have this set (JsFiddle link) of labels and text inputs.

How do I center the whole thing in the middle of the page?

I tried wrapping them in a div and setting it’s alignment to cetner – didn’t do what i expected at all.

Any help is appreciated, than you.

Code for reference:

<div>
<div class="left">
    label
</div>
<div class="right">
    input element
</div>
</div>



<div>
<div class="left">
    another label
</div>
<div class="right">
    another input element
</div>
</div>

//align the labels and input nicely

.left {
    width: 20%;
    float: left;
    text-align: right;
}
.right {
    width: 65%;
    margin-left: 10px;
    float:left;
}

Answer 1

If you’re going to use float, than you need to wrap the whole thing in a DIV and apply margin: 0 auto;

---

I’d do this in this case:

<style>
.field {
    width: 80%;
    margin: 0 auto; 
}
.left {
    width: 20%;
    text-align: right;
    display: block;
    float: left;
    margin-right: 5%;
}
</style>

<div class="field">
   <label class="left">label</label>
   <input type="text">
</div>

<div class="field">
   <label class="left">another label</label>
   <input type="text">
</div>