Các yếu tố đầu vào của biểu mẫu không tập trung

Question

Tôi đã xem xét một số câu trả lời khác nhau ở đây và tất cả dường như sôi xuống để căn chỉnh văn bản: trung tâm theo kiểu div của cha mẹ. Tôi đã thử nó, và nó làm việc cho các nhãn, nhưng không phải là các phần tử đầu vào thực tế.

JSFiddle

Dưới đây là các mã cơ bản:

html

<div id="content"> 
    <div id="login_form"> 
    <h2>Log in to DOT Voting</h2> 
    <form> 
     <label for="username">Username</label> 
     <input type="text" name="username" value="" /> 
     <label for="password">Password</label> 
     <input type="password" name="password" value="" /> 
     <input type="submit" name="submit" value="Log In" /> 
    </div>  
</div> 

css

#login_form { 
    width:90%; 
    background-color: #bdd2ff; 
    border: 1px solid white; 
    margin: 50px auto 0; 
    padding: 1em; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    text-align: center; 
} 

input[type=text], input[type=password] { 
    text-align:center; 
    display: block; 
    margin: 0 0 1em 0; 
    width: 90%; 
    border: 1px solid #818181; 
    padding: 5px; 
} 

input[type=submit] , form a { 
    border: none; 
    margin-right: 1em; 
    padding: 6px; 
    text-decoration: none; 
    font-size: 12px; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    background: #cfdeff; 
    color: black; 
    box-shadow: 0 1px 0 white; 
    -moz-box-shadow: 0 1px 0 white; 
    -webkit-box-shadow: 0 1px 0 white; 
} 

input[type=submit]:hover, form a:hover { 
    background: #007cc2; 
    cursor: pointer; 
} 

Các div login_form là tập trung vào trang, các nhãn biểu mẫu được căn giữa trong div và nút gửi được căn giữa trong div. Nhưng các hộp nhập văn bản không được căn giữa. Tôi có thể làm gì để buộc họ làm trung tâm? (Tôi không quan tâm nếu nội dung của các hộp đầu vào được căn giữa; tôi chỉ muốn các hộp được căn giữa trong div.)

Answer 1

Thêm

margin: auto; 

đến lớp input[type=text], input[type=password] của bạn.

Đồng thời, hãy đảm bảo xóa thuộc tính text-align: center; vì điều này làm cho văn bản trong đầu vào được căn giữa.

JSFiddle

Answer 2

Nó định tâm dựa trên đầu vào 90% [type = text], input [type = mật khẩu] giá trị css. Bạn có thể xác định rằng với chiều rộng cố định hoặc bố cục lỏng, đặt nó thành độ rộng 100% và điều chỉnh lề của nó.

Answer 3

Sửa đổi việc kê khai margin cho input yếu tố của bạn để sử dụng auto cho margin-left và margin-right:

#login_form { 
    width:90%; 
    background-color: #bdd2ff; 
    border: 1px solid white; 
    margin: 50px auto 0; 
    padding: 1em; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    text-align: center; 
} 

input[type=text], input[type=password] { 
    text-align:center; 
    display: block; 
    margin: 0 auto 1em auto; 
    width: 90%; /*280px;*/ 
    border: 1px solid #818181; 
    /* -moz-border-radius: 1px; 
    -webkit-border-radius: 1px; */ 
    padding: 5px; 
} 

input[type=submit] , form a { 
    border: none; 
    margin-right: auto; 
    margin-left: auto; 
    padding: 6px; 
    text-decoration: none; 
    font-size: 12px; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    background: #cfdeff; 
    color: black; 
    box-shadow: 0 1px 0 white; 
    -moz-box-shadow: 0 1px 0 white; 
    -webkit-box-shadow: 0 1px 0 white; 
} 

input[type=submit]:hover, form a:hover { 
    background: #007cc2; 
    cursor: pointer; 
} 

Updated JS Fiddle.

Answer 4

căn chỉnh văn bản không hoạt động trên các phần tử khối. Xóa display:block trên input[type=text], input[type=password] hoặc đổi thành display:inline-block. Lưu ý rằng khối nội tuyến không hoạt động cho < IE7.

Hoặc kể từ khi bạn có một chiều rộng tuyên bố vào đầu vào, bạn có thể loại bỏ các text-align:center và sử dụng margin: 0 auto 1em auto;