テキストを中央揃えのテキストボックスCSSの左端に固定する方法

私は、ページの中央に配置されたフォームを持っており、その要素はフォームの中央に配置されています。私はテキストをフォームの入力ボックスの左端に揃えたいと思っています。言い換えれば、テキストの最初の文字を入力ボックスの左端から開始します。以下のコードとイメージを参照してください：テキストを中央揃えのテキストボックスCSSの左端に固定する方法

<!DOCTYPE HTML> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Log In</title> 
</head> 
<style type="text/css"> 
#wrapper{ 
    border:1px solid black; 
    max-width:200px; 
    max-height:200px; 
    display-webkit-box; 
    margin-left:auto; 
    margin-right:auto; 
    padding:5px; 
    border-radius:5px; 
} 
#login input{ 
    display:-webkit-box; 
    margin-left:auto; 
    margin-right:auto; 
} 
#login span{ 

} 
</style> 
<body> 

<div id="wrapper"> 
<form id="login" action="#" method="POST"> 
<span>User Names:</span><br> 
<input type="text"><br> 
<span>Password:</span><br> 
<input type="password"><br> 
<input type="submit" value="Log In"> 
</form> 
</div> 

</body> 
</html>

Image Here

出典

2017-02-18 Tyler Serino

：左.. – scaisEdge

可能[CSS：同じ行にテキストを左揃え、中央揃え、右揃えにする]の複製（http://stackoverflow.com/questions/13694062/css-left-center-right-align） -text-on-same-line） –

理想的なされていないが、それは動作します。この例では、ウェブサイトのサイズが固定されているため動作します。

#login span{ 
    margin-left: 17px; 
    text-align: left; 
}

それが応答ウェブサイトだ場合、それはthis.μ

画像のように動作しません。text.align http://prntscr.com/eaewe0

出典

2017-02-18 18:56:56

ありがとう、これは私がやっていることに対して完璧に動作します。 –

私は好奇心を持っていましたが、使用する別の位置付け手法があればそれは一貫していますが、それほど大きな取引ではありません –

これは別の方法で、入力を固定幅にしてdivを変更します： #login input { ディスプレイ：-webkit-box; margin-left：auto; margin-right：auto; 幅：160px; } #login { margin-left：auto; margin-right：auto; 幅：160px; } –

<!DOCTYPE HTML> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="UTF-8"> 
 
<title>Log In</title> 
 
</head> 
 
<style type="text/css"> 
 
#wrapper{ 
 
    font-family: sans-serif; 
 
    border:1px solid black; 
 
    max-width:200px; 
 
    margin-left:auto; 
 
    margin-right:auto; 
 
    padding:5px; 
 
    border-radius:5px; 
 
} 
 
#login input{ 
 
    display:-webkit-box; 
 
    margin-left:auto; 
 
    margin-right:auto; 
 
} 
 

 
    
 
</style> 
 
<body> 
 

 
<div id="wrapper"> 
 
<form id="login" action="#" method="POST"> 
 
    User Names:&nbsp;<input type="text"><br> 
 
    Password:&nbsp;<input type="password"><br> 
 
    <input type="submit" value="Log In"> 
 
</form> 
 
</div> 
 

 
</body> 
 
</html>

出典

2017-02-18 20:11:44 mim

テキストを中央揃えのテキストボックスCSSの左端に固定する方法

答えて

関連する問題