CODEWITHSUNDEEP
htmlcss
user7483367
user7483367

Reputation:

Divs not centering completely

Currently im just working on a design for my website login and I'm struggling quite a bit to fully center my work (horizontally). I have tried everything I can think of, (left: 50%) , (margin: 0 auto;) And a few other things, And I dont seem to have much luck! If you could help me it'd be greatly and I seriously mean it greatly appreciated. I know this is probably an easy fix but as a relatively new person to the coding community I would greatly appreciate some help.

I have provided a jsfiddle below if there is any chance if you being able to fully center the items. Thanks,

David.

https://jsfiddle.net/p62jnu5s/

    body,html {
background: repeating-linear-gradient(
  to right,
  #141517,
  #141517 30px,
  #1d1f21 30px,
  #1d1f21 40px
);
    background-size: 100%;
    overflow-x: hidden; 
    overflow-y: hidden;
}
.username {
    position: absolute;
    top: 40%;
    background: #333;
    color: #ccc;
    width: 150px;
    padding: 6px 15px 6px 35px;
    transition: 500ms all ease;
    border: 1px solid #333;
    left: 50%;
}
.username:hover {
    box-shadow: 0px 0px 4px #000;
}
.password {
    position: absolute;
    top: 45%;
    background: #333;
    color: #ccc;
    width: 150px;
    padding: 6px 15px 6px 35px;
    transition: 500ms all ease;
    border: 1px solid #333;
    left: 50%;
}
.password:hover {
    box-shadow: 0px 0px 4px #000;
}

Upvotes: 1

Views: 32

Answers (3)

Gayathri Mohan
Gayathri Mohan

Reputation: 161

Changed your html structure and css. 

<div class="LoginBox">
  <p class="Login">Login</p>
  <input type="text" name="" class="username" placeholder="Username">
  <input type="password" name="" class="password" placeholder="Password">
</div>

Please refer this fiddle https://jsfiddle.net/zm8mps6q/1/

Upvotes: 0

Deepak swain
Deepak swain

Reputation: 3700

Solution 1: Write input fields inside LoginBox class and centre it by css code (text-align: center). Solution 2: Write Everything inside tag. Solution 3: Use Bootstrap like things. Its Grid system will do half code for you.

Upvotes: 0

Boice
Boice

Reputation: 155

Your markup needs some adjusting as well. try putting the form elements inside of the div. you can position that outer div first. then deal with positioning the elements inside the LoginBox. There are very few cases were you will want or need position: absolute. Try and stay away from it until you fully understand it. There are a lot of adjustments you could make to your CSS but the changes I've made below will get you started.

You should also declare a doctype before all of your markup:

<!DOCTYPE html>

Additionally wrap everything in an html tag.

Try this CSS:

body,html {
background: repeating-linear-gradient(
  to right,
  #141517,
  #141517 30px,
  #1d1f21 30px,
  #1d1f21 40px
);
    background-size: 100%;
    overflow-x: hidden; 
    overflow-y: hidden;
}
.username {
    display: block;
    margin: 0 auto;
    background: #333;
    color: #ccc;
    width: 150px;
    padding: 6px 15px 6px 5px;
    transition: 500ms all ease;
    border: 1px solid #333;
    margin-bottom: 10px;
}
.username:hover {
    box-shadow: 0px 0px 4px #000;
}
.password {
    display: block;
    margin: 0 auto;
    background: #333;
    color: #ccc;
    width: 150px;
    padding: 6px 15px 6px 5px;
    transition: 500ms all ease;
    border: 1px solid #333;
}
.password:hover {
    box-shadow: 0px 0px 4px #000;
}
.LoginBox {
    width: 300px;
    margin: 0 auto;
    padding: 25px;
    background-color: firebrick;
    z-index: -3;
    box-shadow: 0px 0px 5px #000;
}
.Login {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 30px;
    font-family: 'Roboto Condensed', sans-serif;
    color: #FFF;
}

and change your markup to this:

<!DOCTYPE html>
<html>
<head>
    <title>Login</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="main.css">
    <link href="https://fonts.googleapis.com/css?family=Raleway:100" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
</head>
<body>

 <div class="LoginBox">
    <input type="text" name="" class="username" placeholder="Username">
    <input type="password" name="" class="password" placeholder="Password">
    <a class="Login">Login</a>
 </div>

</body>
</html>

Upvotes: 1

Related Questions