Can't center content using margin

Question

Guys I am facing a problem: HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>CSS</title>
        <meta http-equiv="author" content="@infinite"><!--Credits-->
        <link rel="stylesheet" type="text/css" href="css.css">
    </head>
    <body>
        <form >
            <input type="submit" value="Submit">
        </form>
    </body>
</html>

CSS:

body{
    background-color:black;
}
form{
    width:500px;
    border:solid 5px white;
}
input[type="submit"]{
    width:200px;
    border:solid 5px white;
    border-radius:50px;
    font-family:Impact,fantasy;
    font-size:300%;
    color:white;
    background-color:inherit;
    margin:300px auto 300px auto;
}

I want to centralize the submit button in the form, but it still sticks to the left side of the form. The "auto" in the margin for the submit button is not working.

Please help..

But if I want to do it using the margin property, can I do it? — codetalker, Sep 04 '15 at 15:22

score 3 · Accepted Answer · edited May 23 '17 at 11:52

3

Here's a working demo

If you want the margin: 0 auto method to work, the element must be a block, so adding display: block to the submit button does the trick.

Referring from this answer it's good to know that if you want margin: 0 auto to work:

The element must display: block

The element must not float

The element must not have a fixed or absolute position

The element must have a width that is not auto

edited May 23 '17 at 11:52

Community

1
1

answered Sep 04 '15 at 15:23

Sohail

558
1
9
23

1

Thanks a lot!! @Sohail – codetalker Sep 04 '15 at 15:24
sure man, I edited the answer and added some reference on how margin: 0 auto work as well – Sohail Sep 04 '15 at 15:29

score 0 · Answer 2 · answered Sep 04 '15 at 15:20

0

you can try add this in form:

form{
  width:500px;
  border:solid 5px white;
  text-align: center;
}

answered Sep 04 '15 at 15:20

step

186
7

score 0 · Answer 3 · answered Sep 04 '15 at 15:24

0

Try adding the following to the input button's style:

display:block;

answered Sep 04 '15 at 15:24

Joe Magaro

213
1
14

score 0 · Answer 4 · answered Sep 04 '15 at 15:51

0

margin: auto; center horizontally only when

Display is block (or table)
Element is not floating
Width should not be auto or 100%

So, to solve your problem, add

input[type="submit"] {
    display: block;
}

as input is displayed inline by default.

answered Sep 04 '15 at 15:51

Barun

4,245
4
23
29

Can't center content using margin

4 Answers4