5 Replies Latest reply: Apr 20, 2012 11:49 AM by Nancy O. RSS

    How to center a CSS image gallery?

    Seaside333

      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>