如何使这些左/右对齐的标签和表格输入居中？

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>

Answer 2

wrap the whole thing in a div and set

         margin: auto;

also set a width, if you want to use the text-align: center; method , that should be applied to the parent pf the div to be centered.