Skip navigation
Currently Being Moderated

How to center a CSS image gallery?

Apr 19, 2012 9:39 PM

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>

 
Replies

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points