0

I have a form that is centered on the page, and the elements are centered in the form. I want the text, however, to align to the left edge of the input boxes in my form. In other words, I want the first letter of the text to start at the left edge of the input box. See code and image below:

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

Jaap
  • 81,064
  • 34
  • 182
  • 193
Tyler Serino
  • 19
  • 2

2 Answers2

0

Not ideal but it works. It will work for this example as your website uses fixed sizes.

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

If it's a responsive website, it won't work like this.µ

Image: http://prntscr.com/eaewe0

Benjamin Naesen
  • 174
  • 1
  • 10
  • I was curious though if there was another positioning technique to use that would be consistent but it's not that big of a deal – Tyler Serino Feb 18 '17 at 19:03
  • A different way is this, one that gives your input a fixed width, and changes your div to it: #login input { display: -webkit-box; margin-left: auto; margin-right: auto; width: 160px; } #login { margin-left: auto; margin-right: auto; width: 160px; } – Benjamin Naesen Feb 18 '17 at 19:51
0

    <!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>
mim
  • 56
  • 1
  • 8