title: How to center an image over another image in CSS
body: <p>I want to put book image thumbnails and their titles/author over another image. It took some time to get the bottom image to show under the paragraph text instead of breaking up. Now that I've fixed that, I can't figure out how to get the book images back in the top center of the image behind it. So, I'm just looking to get those thumbnail images centered on top of the white image behind them. Here's the page:   mcs.athens.edu/~lgeorge1/books.html</p>
  
  <p>EDIT: Now I would like to know how to make the text (authors/title) centered under the book image. I would have thought text-align: center; would have done it but no. It's driving my OCD crazy, haha.</p>
  
  <p>And my code:</p>
  
  <pre><code>div.thumbnail
  {width: 250px;
  text-align: center;
  float: left;
  margin: 0 10px 10px 0;
  background: url(images/white2.jpg) no-repeat;
  }
  .thumbnail img
  {margin: 30px 0 0 40px;
  width: 150px;
  border: 1px solid #777;
  }
  .thumbnail p
  {margin: 0;
  padding: 10px 30px 40px 10px;
  background: url(images/white2.jpg) no-repeat 0 100%;
  }
  .clear{clear: left;}
  </code></pre>