• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

How to center a CSS image gallery?

Explorer ,
Apr 19, 2012 Apr 19, 2012

Copy link to clipboard

Copied

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

here is the html and CSS

thanks

<html>

<head>

<style type="text/css">

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>

<div class="img">

   <a target="_blank" href="klematis_big.htm">

   <img src="klematis_small.jpg" alt="Klematis" width="110" height="90" />

   </a>

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

</div>

<div class="img">

   <a target="_blank" href="klematis2_big.htm">

   <img src="klematis2_small.jpg" alt="Klematis" width="110" height="90" />

   </a>

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

</div>

<div class="img">

   <a target="_blank" href="klematis3_big.htm">

   <img src="klematis3_small.jpg" alt="Klematis" width="110" height="90" />

   </a>

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

</div>

<div class="img">

   <a target="_blank" href="klematis4_big.htm">

   <img src="klematis4_small.jpg" alt="Klematis" width="110" height="90" />

   </a>

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

</div>

</body>

</html>

Views

20.3K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Guru , Apr 19, 2012 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:

<div class="gallery">

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 .ga

...

Votes

Translate

Translate
LEGEND ,
Apr 19, 2012 Apr 19, 2012

Copy link to clipboard

Copied

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Apr 19, 2012 Apr 19, 2012

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guru ,
Apr 19, 2012 Apr 19, 2012

Copy link to clipboard

Copied

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:

<div class="gallery">

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 20, 2012 Apr 20, 2012

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 20, 2012 Apr 20, 2012

Copy link to clipboard

Copied

LATEST

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
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines