CODEWITHSUNDEEP
htmlcss
Nik6019
Nik6019

Reputation: 59

Not able to center Input elements in Div

I have tried googling but with no help most of them give solution as margin:auto and also there are several questions on stackoverflow with same problem most of them have answer as margin:auto i am applying the same solution is not working for me

HTML

<div id="content" class="lcard">
    <center>
    <h1 class="n">Sign in To your<br> Crawler Account</h1><br>

<form onsubmit="return validateForm()" method="post">

    <center><input name="Email" required type="email" placeholder="Email">

    <input name="Password" required type="Password" placeholder="Password" >

    <button type="submit"  class="b"><b>Sign In</b></button>
</center>

    <p id="reg" ><a href="C:/lcrawl/register.html" >New User Please Register</a></p>
</form>
 </div>

CSS

.lcard
{
    background-color:#EEEEEE;
    height:400px;
    width:400px;
    margin:left;

}
.n
{
    margin-bottom:50;
    left:-50%;
}
input
{
    padding: 5 10px;
    width:274px;
    height:44px;

    margin:auto;

}

.b
{
    border: 1px solid;
    background-color:#3079ed;
    width:274px;
    height:44px;
    margin:auto;
}

Upvotes: 0

Views: 83

Answers (6)

jned29
jned29

Reputation: 478

Put your center tag before the first div as you call the id content

    <div id="content" class="lcard">
    <center>
    <h1 class="n">Sign in To your<br> Crawler Account</h1><br>

    <form onsubmit="return validateForm()" method="post">

    <center><input name="Email" required type="email" placeholder="Email">

    <input name="Password" required type="Password" placeholder="Password" >

    <button type="submit"  class="b"><b>Sign In</b></button>
    </center>

    <p id="reg" ><a href="C:/lcrawl/register.html" >New User Please Register</a></p>
    </form>
    </div>

should be...

    <center>
    <div id="content" class="lcard">

    <h1 class="n">Sign in To your<br> Crawler Account</h1><br>

    <form onsubmit="return validateForm()" method="post">

    <center><input name="Email" required type="email" placeholder="Email">

    <input name="Password" required type="Password" placeholder="Password" >

    <button type="submit"  class="b"><b>Sign In</b></button>


    <p id="reg" ><a href="C:/lcrawl/register.html" >New User Please Register</a></p>
    </form>
    </div>
    </center>

Upvotes: 3

Lady Ivory
Lady Ivory

Reputation: 47

I changed ur css a little 

 .lcard
{
    background-color:#EEEEEE;
    height:400px;
    width:400px;
    margin-left: auto;
    margin-right: auto;

}

Now It's work in my PC.

enter image description here

Upvotes: 1

Kristian
Kristian

Reputation: 2505

Nothing's wrong with your code

Here is jsfiddle, with your code plus minor modification

http://jsfiddle.net/Lb6mm/2/

image description here

Upvotes: 0

Justinas
Justinas

Reputation: 43557

First, remove OLD OLD center blocks, than just apply text-align: center to form and to header. JSFiddle

.n
{
    text-align: center;
}

Upvotes: 1

Pepelius
Pepelius

Reputation: 1609

First thing I noticed is the margin: left which I'm not sure about if it's a real value or not.

You should also check the attributes within your input elements. Types and other values seem strange, try to mess around with them first and then try using input[type="text"] and input[type="submit"] in the CSS values, instead of just **input.

Upvotes: 3

Priya
Priya

Reputation: 489

Why you are giving margin left here??

.lcard
{
    background-color:#EEEEEE;
    height:400px;
    width:400px;
    margin:left;

}

Upvotes: 3

Related Questions