CSS margin auto not centering

css margin centering
Crispy picture Crispy · May 29, 2013 · Viewed 14k times · Source

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>

Answer

Peter Wooster picture Peter Wooster · May 29, 2013

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

Related questions

Auto margins don't center image in page

In this example the image is not centered. Why? My browser is Google Chrome v10 on windows 7, not IE. <img src="/img/logo.png" style="margin:0px auto;"/>

Read More
When to use margin vs padding in CSS

When writing CSS, is there a particular rule or guideline that should be used in deciding when to use margin and when to use padding?

Read More
How to align two elements on the same line without changing HTML

I have two elements on the same line floated left and floated right. <style type="text/css"> #element1 {float:left;} #element2 {float:right;} </style> <div id="element1"> element 1 markup </div> <div …

Read More