HTML center content through margin auto not working

Question

I have the following Html code

    
Team
    
    

        
                      

              相关标签:
       
      

Answer 1

Images are inline level elements by default. You need to use display:block; if you want your images and margin to work properly.

img{
 display: block;
}

Answer 2

Team needs to have a width to be able to use margin: auto.

div#team {
    margin: 0 auto;
    width: 400px;
}

Here is a fiddle: JS Fiddle

Answer 3

float will upset this too.. float:none; does the trick if you think it may be inheriting a 'float' directive from another rule somewhere.

Answer 4

#team { 
    margin: auto; 
    width: 400px;
}

Basically margin depends on width if and only if we want to show our div in the center of the page.

Answer 5

*Use the display:block; for the images classes.*

Answer 6

You need to set a width to #team, for example:

div#team {
   margin: 0 auto;
   width: 800px;
}

... which is a shorthand version of:

div#team {
    margin-top: 0;
    margin-left: auto;
    margin-bottom: 0;
    margin-right: auto;
    width: 800px;
}