index.html

<div id="wrapper"> <!-- this is only for demo -->
  <h1>Image <span class="amp">&</span> caption demo with borders</h1>
  
  <!-- Small Centered Image With Caption -->
  <h2>Small centered image with caption</h2>
  <div class="figure small centered">
  <div class="liner">
    <img src="http://farm4.staticflickr.com/3298/3577042795_4ae17f1a3c_z.jpg" alt="" title="">
    <p class="caption">Giving credit where credit is due</p>
  </div>
</div>
  
   <!-- Medium Centered Image With Caption -->
  <h2>Medium centered image with caption</h2>
  <div class="figure medium centered">
  <div class="liner">
    <img src="http://farm4.staticflickr.com/3298/3577042795_4ae17f1a3c_z.jpg" alt="" title="">
    <p class="caption">Giving credit where credit is due</p>
  </div>
</div>
  
  <!-- Large Centered Image With Caption -->
  <h2>Large centered image with caption</h2>
  <div class="figure large centered">
  <div class="liner">
    <img src="http://farm4.staticflickr.com/3298/3577042795_4ae17f1a3c_z.jpg" alt="" title="">
    <p class="caption">Giving credit where credit is due</p>
  </div>
</div>
  
    <!-- Large Centered Image With Extended Caption -->
  <h2>Large centered image with extended caption</h2>
  <div class="figure large centered">
  <div class="liner">
    <img src="http://farm4.staticflickr.com/3298/3577042795_4ae17f1a3c_z.jpg" alt="" title="">
    <p class="caption">Giving credit where credit is due</p>
  </div>
  <p>Lorem ipsum nostrud irure sed id ut non ut adipisicing dolor qui esse elit. Lorem ipsum sed nisi dolore non officia ullamco in eiusmod amet velit incididunt sunt sed dolore ad aliquip proident in aliqua proident sed aliqua esse aliquip nostrud reprehenderit voluptate deserunt.
  </p>
</div>
  
   <!-- Large Centered Image With padding on caption -->
  <h2>Same as above but with left and right padding on caption</h2>
   <div class="figure large centered">
  <div class="liner">
    <img src="http://farm4.staticflickr.com/3298/3577042795_4ae17f1a3c_z.jpg" alt="" title="">
       <span>
    <p class="caption">Giving credit where credit is due</p>
    <p>Lorem ipsum nostrud irure sed id ut non ut adipisicing dolor qui esse elit. Lorem ipsum sed nisi dolore non officia ullamco in eiusmod amet velit incididunt sunt sed dolore ad aliquip proident in aliqua proident sed aliqua esse aliquip nostrud reprehenderit voluptate deserunt.
    </p>
       </span>
  </div>
</div>
 
  <h2>Large centered image without a caption</h2>
  <img class="figure centered has-border" src="http://farm4.staticflickr.com/3298/3577042795_4ae17f1a3c_z.jpg" alt="" title="">
  
  
  
    <h2>Left aligned image with caption</h2>
    <div class="figure left">
       <div class="liner">
         <img src="http://farm4.staticflickr.com/3298/3577042795_4ae17f1a3c_n.jpg" alt="" title="">
            <p class="caption">Giving credit where credit is due</p>
       </div>
  </div>
    
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>  
  
  <p>Lorem ipsum id occaecat officia ex laboris tempor commodo et tempor ea sed. Lorem ipsum culpa sit consequat eiusmod officia ea ut Excepteur consectetur et occaecat occaecat mollit aliquip dolore adipisicing ad velit voluptate cillum amet in exercitation velit aliqua laborum Excepteur aliquip in ex exercitation ad adipisicing nostrud minim magna cillum pariatur ut ullamco officia adipisicing elit pariatur culpa nostrud ex do sed aliquip Duis dolor ad mollit voluptate tempor in ut eu ullamco enim pariatur aliqua in anim voluptate ut culpa elit proident do qui laboris adipisicing reprehenderit elit commodo dolor.  </p>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
  
  <!-- Right aligned image with caption -->
  <h2>Right aligned image with caption</h2>
     <div class="figure right">
       <div class="liner">
         <img src="http://farm4.staticflickr.com/3298/3577042795_4ae17f1a3c_n.jpg" alt="" title="">
            <p class="caption">Giving credit where credit is due</p>
       </div>
  </div>
    
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>  
  
  <p>Lorem ipsum id occaecat officia ex laboris tempor commodo et tempor ea sed. Lorem ipsum culpa sit consequat eiusmod officia ea ut Excepteur consectetur et occaecat occaecat mollit aliquip dolore adipisicing ad velit voluptate cillum amet in exercitation velit aliqua laborum Excepteur aliquip in ex exercitation ad adipisicing nostrud minim magna cillum pariatur ut ullamco officia adipisicing elit pariatur culpa nostrud ex do sed aliquip Duis dolor ad mollit voluptate tempor in ut eu ullamco enim pariatur aliqua in anim voluptate ut culpa elit proident do qui laboris adipisicing reprehenderit elit commodo dolor.  </p>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
  
 
  <hr>
  
  <!-- image credit -->
<p id="credit">Images courtesy of <a href="http://flic.kr/p/6s6hcD">Karen Horton</a> on Flickr</p>
  
  <br>
 
  
</div>

style.css

/*** | DEMO STUFF ONLY ***/

body {
  font: 12px/1.5 verdana, sans-serif;
  background: #eee;
  padding-bottom: 44px;
  
}

#wrapper {
  width: 55%;
  padding: 44px 25px 33px;
  background: #fff;
  margin: 0 auto;
  min-height: 1500px;
  overflow: hidden;
  box-shadow: 0 0 1px 3px rgba(0,0,0,.04);
}

h1 {
  font-family: georgia, serif;
  font-weight: normal;
  font-size: 38px;
  line-height: 50px;
  color: #111;
  margin-top: 0;
  padding-bottom: 10px;
  border-bottom: 6px double #ededed;
  text-align: center;
  
}

h2 {
  color: #09f;
  font-size:15px;
  margin-bottom: 15px; 
  margin-top: 27px;
  line-height: normal;
  text-align: center;
  
}

img {
  max-width: 100%;
  height: auto;
}

#credit {
  font:italic 12px/20px georgia, serif;
  color: #555;
  text-align: left;
  margin-bottom: 22px;
}
a {
  color: #09f;
}

.amp {
 font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;
font-style: italic;
font-weight: normal;
}

hr {
  margin-top: 44px;
  width: 2px;
  border: 0;
  height: 2px;
  border-top:1px solid #ccc;
  display: block;
  width: 100%;
}
/*** END DEMO STUFF ***************************/

/* THESE ARE RELEVANT STYLES */

.figure {display: block;}

img.figure{margin-bottom:13px;}

.centered {
  margin-left: auto;
  margin-right: auto;
}

.left, .right {
  margin-top: 5px; /* this aligns the top of the
  floated element with the text. Otherwise the floated element will appear to be a couple of pixel ~5px above the wrapped text. This is probably caused by the line height of the text. You can remove this whole block if you wish */
}

.left {
  float: left;
  margin-right: 20px; /* so wrapped text doesn't sit flush against image border -- whitespace is good. Set this value to whatever you want */
}

.right {
   float: right;
   margin-left: 20px; /* so wrapped text doesn't sit flush against image border -- whitespace is good. Set this value to whatever you want */
}

.small {
  width: 30%;
  /*max-width: width of your small sized imgs */
}

.medium {
  width: 60%;
  /*max-width: width of your medium sized imgs */
}

.large {
  width: 90%;
  max-width: 640px; /* width of your large sized
  imgs -- this value here is only for this demo.   The large image has a width of 640px so we will constrain the img-center container at this width for super large screens so the caption remains aligned with it.*/
}

.caption {
  display: block; /* so you can use inline elements like span for captions. Block makes sure the caption always falls below the image */
  font-size: 95%; /*play around with this value*/
  color: #555; /* and this too */
  margin:0 0 13px; /* 13px is the bottom margin currently set on most of your block elements, p's , divs etc -- you can change this value if you wish */
}


/* General text alignment classes. You can actually use these on element you like */
.txt-right   {text-align: right;}
.txt-left    {text-align: left;}
.txt-center  {text-align: center;}
.txt-justify {text-align: justify;}

/*figure with padding applied to captioned text. IE6 doesn't support the adjacent selector but that won't matter much*/
.figure img + span {
  display: block;
  padding: 0 15px;
}


/* Adding borders */
.figure .liner,
.has-border {
  padding: 10px;
  background: #eee;
  border: 1px solid #dedede;
}

.figure .liner {
  margin: 0;
}

.figure .caption {
  margin-bottom: 0;
}