How to center a CSS image gallery?

Report · Apr 19, 2012

How would you center a basic CSS image gallery on a page?

here is the html and CSS

thanks

<html>

<head>

div.img

{

margin:2px;

border:1px solid #0000ff;

height:auto;

width:auto;

float:left;

text-align:center;

}

div.img img

{

display:inline;

margin:3px;

border:1px solid #ffffff;

}

div.img a:hover img

{

border:1px solid #0000ff;

}

div.desc

{

text-align:center;

font-weight:normal;

width:120px;

margin:2px;

}

</style>

</head>

<body>

</a>

<div class="desc">Add a description of the image here</div>

</div>

</a>

<div class="desc">Add a description of the image here</div>

</div>

</a>

<div class="desc">Add a description of the image here</div>

</div>

</a>

<div class="desc">Add a description of the image here</div>

</div>

</body>

</html>

Report · Apr 19, 2012

You could use these recommendations:

have a look at Nancy O.'s Templates: http://alt-web.com/TEMPLATES/CSS-Semi-liq-photo-sheet.shtml or

http://buildinternet.com/2008/11/how-to-center-a-website-with-css/

http://forums.adobe.com/message/2081750#2081750

http://forums.adobe.com/thread/429114

Hans-Günter

Report · Apr 19, 2012

I looked at that link.

I can't figure out how to add anything from there to my html or css to center the image gallery...what would I add to the css or html to center the gallery? sorry i can't figure it out.

thanks

Report · Apr 19, 2012

Put all the HTML for the images in a div then give it a width that is enough to contain your images and then centre that div.

Add this to your HTML with a closing </div> element of course, after the relevant code:

And pop this in your CSS:

div.gallery {

margin:0 auto;

width: 400px; /*you decide width*/

}

If that works out you could tidy up the CSS a bit. You might find that you can remove say the class on the img elements an use the container to select

div.img img. Could become .gallery img

Martin

Report · Apr 20, 2012

Please have a look at David Powers' cookbook, where you will find the great explanations and so too Martin's hint:

http://cookbooks.adobe.com/post_Centering_web_pages_and_other_elements_with_CSS-16640.html.

The "dark secret" and always the most important is this (what you can see so too in my second link):

#wrapper {

width: 960px;

margin: 0 auto;

}

Hans-Günter

Report · Apr 20, 2012

To center a division or web page you need 3 things:

1) a valid document type declaration on the first line of your HTML code. Based on what you posted, your HTML code does not contain a DTD.

2) a stated container width in px, em or %.

3) margin-right and margin-left of 'auto'

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator

How to center a CSS image gallery?

1 Correct answer

Photos