以HTML/CSS格式居中表單及其標籤

Question

我創建了一個帶有兩個字段的簡單表單，用戶名和密碼以及使用CSS的登錄對話框。 我想中心表單及其標籤。目前它集中了場區盒子而不是標籤，它看起來像這樣：http://jsfiddle.net/zkzh66n0/

我認爲它是與其他的CSS樣式，因爲當我在小提琴試圖對自己的風格，它的工作：http://jsfiddle.net/zkzh66n0/1/

HTML：

<div id ="form"> 

     <form action = "entryformlogon.php" method="post"> 


     <label for = "user">Username</label> 
      <input type ="text" name ="Username"><br> 

     <label for ="password">Password</label> 
      <input type ="password" name = "Password"><br> 

     <input type = "submit" name ="loginbutton" value ="Log in"> 

    </form> 

</div> 

CSS：

label{ 
    float: left; 
    width: 120px; 
} 

input, textarea{ 
    width: 180px; 
    margin-bottom: 5px; 
} 


#loginbutton{ 
    margin-left: 120px; 
    margin-top: 5px; 
    width: 90px; 
} 

#form { 
    text-align: center; 
    position: relative; 
    top: 100px; 
} 

Answer 1

與display: inline-block更換float: left，那麼寬度和利潤率的工作。另外，如果你想通過#loginbutton來引用登錄按鈕，除了名稱之外，你必須設置它的id屬性，因爲這是這個選擇器引用的。

fiddle

相關CSS：

label{ 
    display: inline-block; 
    width: 120px; 
    text-align: left; 
} 

#loginbutton{ 
    display: inline-block; 
    margin-left: 28px; 
    margin-top: 5px; 
    width: 90px; 
} 

我也改變了按鈕CSS包括display: inline-block所以餘量可以如此設置其線與所述輸入。

Answer 2

試試這個

http://jsfiddle.net/zkzh66n0/2/

從標籤中刪除float: left;。

，如果您需要在標籤和輸入框的空間儘量給padding像下面撥弄

http://jsfiddle.net/zkzh66n0/3/