如何頁面居中這些左/右對齊的標籤和表單輸入？

Question

我有this set（JsFiddle鏈接）的標籤和文本輸入。

我該如何將整個事物置於頁面中間？

我試圖把它們包裝在一個div中，並設置它與cetner的對齊 - 沒有做我期望的。

任何幫助表示讚賞，比你。

代碼以供參考：

<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

如果你要使用浮動，比你需要用整個事情的DIV和應用margin: 0 auto;

---

我應該這樣做在這種情況下：

<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

包住整個事情在一個div，並設置

  margin: auto; 

也設置了一個寬度，如果你想使用text-align: center;方法，應該將其應用於父pf div來居中。