Team

Geek Answers Handbook

Auto Center Margin Reject HTML Content

I have the following HTML

<div id="team"> <h1>Team</h1> <img src="assets/divider.png" id="divider"> <img src="assets/team.png" id="team_pic"> </div>

Next CSS

 div#team { margin: 0 auto; margin-left:auto; margin-right:auto; right:auto; left:auto; }

However, the child divider and the pic command are all the way to the left. I though margin: the car will center everything.

then I put the following in child elements.

 div#team img#team_pic { width:704px; height:462px; margin-left:auto; margin-left:auto; }

No, nothing happens, the elements remain on the left and are not centered.

+4
source share
6 answers

You need to set the width of #team, for example:

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

... which is an abridged version:

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

Images are built-in level elements by default. You need to use display:block; if you want your images and margin to work correctly.

 img{ display: block; }
+3
source

The command must be wide so margin: auto can be used.

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

Here is the fiddle: JS Fiddle

+2
source

float will break this too. float:none; does the trick if you think it can inherit the "float" directive from another rule somewhere.

+2
source 
 #team { margin: auto; width: 400px; }

In fact, the field depends on the width, if and only if we want to show our div in the center of the page.

0
source

* Use Display: unit; for image classes. *

0
source

More articles:


All Articles