CODEWITHSUNDEEP
htmlcss
Vlad
Vlad

Reputation: 145

Center A form HTML CSS

Hello I am having issues centering a form for a login page. I am not to good with CSS and it has been a while since I have played with HTML. What I want to do is, center the input boxes and align the text left on top of the input fields, as well as have an image centered as well, like in the picture. I have tried adding different div id and tags to the form but I can not seem to figure out the css part. I appreciate any help and sorry if the CSS is sloppy.

enter image description here

body {
    background-color:lightgray; 
    font-family:Verdana, Arial, Helvetica, sans-serif;  
}
h1 {
    color: black;
}
p {
    color: black;
}

html {
    text-alight: center;
}

#login {
    text-align:center; 
}

input[type=text], input[type=date], input[type=password] {
    width: 30%;
    height: 50px;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
}

input[type=submit] {
    width: 30%;
    height: 50px;
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 16px 32px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
}

#service_type, #series, #speaker, #users {
    width: 30%;
    height: 50px;   
}

@media only screen and (max-device-width: 1024px){

input[type=text], input[type=date], input[type=password] {
    width: 100%;
    height: 50px;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
}

input[type=submit] {
    width: 100%;
    height: 50px;
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 16px 32px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
}

#service_type, #series, #speaker, #users{
    width: 100%;
    height: 50px;
}

#keypad_users{
    width: 345px;
    height: 50px;
    vertical-align:middle; 
    text-align:center;
    border:1px solid #000000; 
    font-size:30px; 
    font-weight:bold;
}

#keypad {margin:auto; margin-top:10px;}

#keypad tr td {
    vertical-align:middle; 
    text-align:center; 
    border:1px solid #000000; 
    font-size:18px; 
    font-weight:bold; 
    width:100px; 
    height:80px; 
    cursor:pointer; 
    background-color:#666666; 
    color:#CCCCCC;
}

#keypad tr td:hover {
background-color:#999999; 
color:#FFFF00;
}

#display {
text-align:center; 
    width:345px; 
    margin:10px auto auto auto; 
    background-color:#000000; 
    color:#00FF00; 
    font-size:48px; 
    border:1px solid #999999;
}
#message {
    text-align:center; 
    color:#009900; 
    font-size:18px; 
    font-weight:bold; 
    display:none;
}

}
<div id="login">
<form action = "login.php" id="login" method ="POST">
Username <br />
<input type="text" name="username" id="username" required /><br /><br />
Password <br />
<input type ="password" name="password" id="password" required /><br /><br />

<input type="submit" name="submit" value="Log in">

</form> 
</div>

Upvotes: 0

Views: 4143

Answers (5)

NVRM
NVRM

Reputation: 13067

Minimal jump start template, using CSS flex:

body {background:darkblue;margin:0;min-height:100vh;display:flex;align-items:center;justify-content:space-around;font-size:large}
#container {width:30%;margin:auto;padding:2em;background-color:#F0F0F0;border-radius: 0.5em}
#container input {margin:0.5em 0 1em 0;height: 2em;padding: 0.5em;width:calc(100% - 1.5em);font-weight:bold}
#container input[type="submit"] {cursor:pointer;font-size:larger;margin:0.5em 0 0 0;padding:0.2em;width:100%}
<!DOCTYPE html>
<meta charset=utf-8>
<title>Login</title>
<body>
  <div id="container">
    <form action = "login.php" id="login" method ="POST">
       <label for="username">Username </label>
       <input type="text" name="username" id="username" required />
       <label for="password">Password</label>
       <input type ="password" name="password" id="password" required />
       <input type="submit" name="submit" value="Log in">
    </form>
  </div>
</body></html>

Going a bit further in the CSS, while keeping it fairly minimal. The emoji icon is a Unicode character, taken from Unicode 15.1 https://www.unicode.org/emoji/charts-15.1/emoji-style.txt

body {background:darkblue;margin:0;min-height:100vh;display:flex;align-items:center;justify-content:space-around;font-size:large}
.logo {
  height: 7em;
  max-height: 7em;
  max-width: 7em;
  background: #272b2d;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='0.8em' font-size='100'>🧔🏻‍♂️</text></svg>");
  background-size: cover;
  border-radius: 7em;
  border: 0.5em deepskyblue solid;
  transition: transform .7s ease-in-out;
  margin: 0 auto 1em auto
}
.logo:hover {transform: rotate(360deg);cursor:crosshair}
#container {width:12em;margin:auto;padding:2em;background-color:#F0F0F0;border-radius: 0.5em;min-width:12em;max-width:12em;transition: all 0.5s ease-in}
#container:hover {box-shadow: rgba(255, 255, 255, 0.3) 0px 0px 50px}
#container input {margin:0.5em 0 1em 0;height: 2em;padding: 0.5em;width:calc(100% - 1.5em);font-weight: bold}
#container input[type="submit"] {cursor:pointer;font-size:larger;margin:0.5em 0 0 0;padding:0.2em;width:100%}
<!DOCTYPE html>
<meta charset=utf-8>
<title>DB</title>
<body>
  <div id="container">
    <div class="logo"></div>
    <form action = "login.php" id="login" method ="POST">
       <label for="username">Username </label>
       <input type="text" name="username" id="username" required />
       <label for="password">Password</label>
       <input type ="password" name="password" id="password" required />
       <input type="submit" name="submit" value="Log in">
       <br><br>
       <a href="#">Register account</a>
    </form>
  </div>
</body></html>

enter image description here

Upvotes: 0

Jon P
Jon P

Reputation: 19772

I've improved your HTML. All form inputs should have an associated label element. Also don't use br for spacing use padding/margin instead.

Further more use have a duplicated id, id's must be unique to the page.

#login_container  /*This is Our base container for the login "control" */
{
  width:30%; /*Define the width of the control*/
  margin:auto; /*This Provide the horizontal centering of the control*/
  padding:120px 10px 10px 10px; /*Add some padding, the first number is the top and provides room for the image*/
  background-image:url(" http://fillmurray.com/100/100"); /*Add our background image, thanks Bill Murray*/
  background-position:center 10px; /*Position our image, first is Horizontal alignment, second is top*/
  background-repeat:no-repeat; /*One Bil Murray is more than enough*/
  background-color: #F0F0F0; /*Base Background image*/
}

#login_container label
{
  display:block;  /*Label will now take up a whole line*/
  margin-bottom:.25em; /*Give it some room underneath*/
}

#login_container input[type="text"], #login_container input[type="password"], #login_container input[type="submit"]
{
  width:100%; /*Form controls now take 100% width of the container*/
  margin-bottom:0.5em;
}
<div id="login_container"> <!-- Can't have duplicate ID's -->
<form action = "login.php" id="login" method ="POST">
   <label for="username">Username </label>
   <input type="text" name="username" id="username" required />
   <label for="password">Password</label>
   <input type ="password" name="password" id="password" required />
   <input type="submit" name="submit" value="Log in">
</form> 
</div>

Upvotes: 1

Johannes
Johannes

Reputation: 67748

One problem in your code is that you use the ID "login " twice, which must not be done. I put together a codepen, which you can find here:

http://codepen.io/anon/pen/dNWQgp

What I basically did (except adding a div representing the image in your picture): I assigned the following CSS to a wrapper DIV around the whole form and image. It uses flexbox to center the contents. Plus I assigned a width setting (40%) to the form element.

.wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

Upvotes: 1

Wanjia
Wanjia

Reputation: 817

I've made a JSfiddle for you here (click me please) that resembles the picture you've added.

As requested to not use a third party like I've added the code here:

HTML

<div id="login">
  <form action = "login.php" id="login" method ="POST">
    <div class="picture">

    </div>
    <p>Username</p>
    <input type="text" name="username" id="username" required /><br /><br />
    
    <p>Password</p>
    <input type ="password" name="password" id="password" required /><br /><br />

    <input type="submit" name="submit" value="Log in">
  </form> 
</div>

CSS

body
{
    background-color:lightgray; 
    font-family:Verdana, Arial, Helvetica, sans-serif;  
}

#login
{
    text-align:center;
    width: 50%;
    margin: 0 auto;
}
.picture
{
  width:100px;
  height: 100px;
  border-radius: 100px;
  background-color:red;
  margin: 0 auto;
}
#login p
{
  float: left;
}
input[type=text], input[type=date], input[type=password] {
    width: 100%;
    height: 50px;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
}

input[type=submit] {
    width: 100%;
    height: 50px;
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 16px 32px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
}

EDIT: New fiddle here: https://jsfiddle.net/gay1ufa1/2/

Upvotes: 3

Gabriel
Gabriel

Reputation: 2190

To center a div set margin-left and margin-right to auto and assign a fixed width to it. In your case, this would be for #login.

Upvotes: 0

Related Questions