Elementy wprowadzania formularzy nie centrujące

Question

Przyjrzałem się tutaj wielu różnym odpowiedziom i wszystkie wydają się sprowadzać do wyrównania tekstu: środek w stylu div rodzica. Próbowałem tego i działa na etykietach, ale nie na rzeczywistych elementach wejściowych.

JSFiddle

Oto kod podstawowy:

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; 
} 

login_form div jest wyśrodkowane na stronie, etykiety formularzy są wyśrodkowane w dziale div, a przycisk przesyłania jest wyśrodkowany w elemencie div. Ale pola wprowadzania tekstu nie są wyśrodkowane. Co mogę zrobić, aby zmusić je do centrum? (Nie obchodzi mnie, czy zawartość pól wejściowych jest wyśrodkowana, ja po prostu chcę, aby te pola były wycentrowane w div.)

Answer 1

Dodaj

margin: auto; 

do klasy input[type=text], input[type=password].

Należy również usunąć atrybut text-align: center;, ponieważ powoduje to wyśrodkowanie tekstu na wejściu.

JSFiddle

Answer 2

Centrowanie odbywa się w oparciu o 90% danych wejściowych [typ = tekst], dane wejściowe [typ = hasło] wartość css. Możesz zdefiniować, że przy stałej szerokości, lub dla układów płynów, ustaw ją na szerokość 100% i dostosuj jej margines.

Answer 3

Zmienić deklarację margin dla Twojego elementów input używać auto dla margin-left i 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

Wyrównanie tekstu nie działa na elementach bloków. Usuń display:block na input[type=text], input[type=password] lub zmień go na display:inline-block. Zauważ, że blok inline nie działa dla < IE7.

Albo skoro mają szerokość deklarowanej na wejściu, można usunąć text-align:center i używać margin: 0 auto 1em auto;