Question

我有一个以页面为中心的表单，元素在表单中居中。但是，我希望文本与表单中输入框的左边缘对齐。换句话说，我希望文本的第一个字母从输入框的左边缘开始。请参阅下面的代码和图片：

    <!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

Answer 1

不理想，但有效。当您的网站使用固定大小时，它将适用于此示例。

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

如果它是一个响应式网站，它就不会像这样工作.μ

图片：http://prntscr.com/eaewe0

Answer 2

＆＃13;

    <!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>

＆＃13;

如何将文本修复到居中文本框css

2 个答案: