CODEWITHSUNDEEP
htmlcssmargin
user3955666
user3955666

Reputation:

Margin 0 Auto Not Working On Div CSS

I'm currently trying to center center a div with a form inside of it, however it doesn't seem to want to center with margin: 0 auto;. I have made sure to add display: block; to the div but it still won't work!

This is my HTML:

<div class="card form-card">
        <form class="formPassword" action="" method="post">
            <ul style="list-style-type:none;padding-top:50px;margin-left:-40px;">
                <li>
                    <input class="formInputPassword" type="password" name="current_password" placeholder="Current Password"><br><br><br><br>
                </li>
                <li>
                    <input class="formInputPassword" type="password" name="password" placeholder="New Password"><br><br>
                </li>
                <li>
                    <input class="formInputPassword" type="password" name="password_again" placeholder="Repeat Password"><br><br>
                </li>
                <li>
                    <input type="submit" class="btn btn-primary" value="Save"><br><br>
                </li>
            </ul>
        </form>
</div>

This is my CSS:

        .liInline{
            display:inline-block;
            list-style-type:none;
        }
        div.card{
            display:block;
        }
        .card{
            display:block;
            padding: 20px 25px 30px;
            margin: 0 auto 25px;
            width: auto;
        }
        .formInputPassword{
            width:370px;
            height:38px;
            font-size:1.6em;
            text-align:center;
        }

Thanks

Upvotes: 0

Views: 3844

Answers (2)

ketan
ketan

Reputation: 19341

Solution 1:

Give text-align: center; to div.card will make your form center..

div.card{
    display:block;
    text-align:center;
}

Working Fiddle

Solution 2:

margin:0 auto; works when it have parent div and fixed width.
Like here i give form fixed width and margin:0 auto. will make form horizontal center.

.formPassword{
      margin:0 auto;
       width:250px;
  }

Fiddle

Solution 3:

And if you don't want to give fixed width, then use display:table

.formPassword {
    display: table;
    margin: 0 auto;
}

Fiddle

Upvotes: 2

shiva chauhan
shiva chauhan

Reputation: 420

if you want form in center you can text-align center in card class like eg.

.card{
            display:block;
            padding: 20px 25px 30px;
            margin: 0px auto;

            background:gray;
            text-align:center;
        }

hope will help you.

Upvotes: 0

Related Questions