Skip to main content
S
Seaside333
New Participant
April 20, 2012
Answered

How to center a CSS image gallery?

  • April 20, 2012
  • 2 replies
  • 21579 views

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>

    This topic has been closed for replies.
    Correct answer martcol

    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

    2 replies

    Nancy OShea
    Nancy OShea
    Community Expert
    April 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
    hans-g.
    hans-g.
    Brainiac
    April 20, 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

    S
    Seaside333Author
    New Participant
    April 20, 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

    martcol
    martcolCorrect answer
    Inspiring
    April 20, 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 .gallery img

    Martin

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices