Overlay + Center/Right Align

Without knowing the size of the base element how can I retain it's center alignment while overlaying a box in the top corner.

by Terri Swallow

HTML

<h3>Center Align</h3>
<p><img src="https://farm4.staticflickr.com/3305/3493791131_cbfb113360.jpg" alt="Puppy" class="aligncenter wrapme" style="width:300px"></p>
    
    <p><img src="https://farm4.staticflickr.com/3305/3493791131_cbfb113360.jpg" alt="Puppy" class="aligncenter nowrap" style="width:300px"></p>
        
<h3>Left Align</h3>
<p><img src="https://farm4.staticflickr.com/3305/3493791131_cbfb113360.jpg" alt="Puppy" class="alignleft wrapme" style="width:300px"></p>
    
    <p><img src="https://farm4.staticflickr.com/3305/3493791131_cbfb113360.jpg" alt="Puppy" class="alignleft nowrap" style="width:300px"></p>
        
        
<h3>Right Align</h3>
<p><img src="https://farm4.staticflickr.com/3305/3493791131_cbfb113360.jpg" alt="Puppy" class="alignright wrapme" style="width:300px"></dpiv>
    
    <p><img src="https://farm4.staticflickr.com/3305/3493791131_cbfb113360.jpg" alt="Puppy" class="alignright nowrap" style="width:300px"></p>

    <div><a href="https://www.flickr.com/photos/fanz/3493791131" title="Puppy by Francois de Halleux, on Flickr">Photo by Francois de Halleux via Flickr (Creative Commons by-nc-nd)</a></div>

CSS

.wrapper {
  position: relative;
  display: inline-block;
}

.aligncenter {
  display: block;
  margin-right: auto;
  margin-left: auto;
}
p.aligncenter {
  text-align:center;
}

.alignleft {
  display: block;
  margin-right: auto;
  margin-left: 0;
}
p.alignleft {
  text-align:left;
}

.alignright {
  display: block;
  margin-right: 0;
  margin-left: auto;
}
p.alignright {
  text-align:right;
}

.countbox {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color:#fff;
  padding:10px;
  display:block;
}

JavaScript

// Aligned correctly, horray!

$(document).ready(function () {
    // needs "view details" box
    $('img.wrapme').each(function () {
        $(this).wrap('<span class="wrapper"></span>');
        if ($(this).hasClass('alignright')) {
            $(this).parent().parent().addClass('alignright');
        } else if ($(this).hasClass('aligncenter')) {
            $(this).parent().parent().addClass('aligncenter');
        } else if ($(this).hasClass('alignleft')) {
            $(this).parent().parent().addClass('alignleft');
        }
        $(this).parent().append('<span class="countbox">View Details</span>');
    });
});