Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS margin auto not centering

I have simplified the code as much as possible, but still can't get it to center. I believe my inexperience with CSS is not allowing me to see something extremely simple.

If anyone also knows some good resources for css, that'll be great. I have read sections of many CSS books but there all very basic and cover the same thing.

CSS Markup:

/* MAIN ––––––––––––––––––––– */
html {
    /* overflow-y:scroll; */
}
body {
    /* margin:0; */
    /* position:relative; */
}
/* Form ––––––––––––––––––––– */
#form {
    margin:0 auto;
    width: 300px;
    height: 200px;
    display: inline-block;
    border: 2px solid black;
}

index.html

<html>
  <body>

    <form id='form'></form>

  </body>
</hml>
like image 744
Brandon Nadeau Avatar asked May 28 '13 22:05

Brandon Nadeau


1 Answers

Change the display to block if you want to use margin:auto for centering. That does not work with inline elements.

like image 51
Peter Wooster Avatar answered Sep 18 '22 17:09

Peter Wooster