Centering an element that has an element positioned over it without knowing widths

Question

Using JavaScript I am wrapping an image with a wrapper and adding an element to overlay in the bottom right corner. The problem is that when I define the CSS to make sure the overlay is positioned correctly in reference to the image I lose the center or right alignment.

I can modify the CSS and JavaScript but cannot modify the HTML.

I also cannot assume the width of the images and would prefer not to use JS to measure those width to keep everything as light as possible and to not interfere with any media queries in the larger project.

I created a quick jsFiddle to explain the problem a little better: https://jsfiddle.net/terriann/p220ddet/6/

RESOLVED see Fiddle: http://jsfiddle.net/terriann/p220ddet/11/

Sample HTML output (cause SO requires code if I link to jsfiddle)

<div class="wrapper aligncenter">
    <img src="https://farm4.staticflickr.com/3305/3493791131_cbfb113360.jpg" alt="Puppy" class="aligncenter wrapme" style="width:300px">
    <div class="countbox">View Details</div>
</div>

<div class="wrapper alignright">
    <img src="https://farm4.staticflickr.com/3305/3493791131_cbfb113360.jpg" alt="Puppy" class="alignright wrapme" style="width:300px">
    <div class="countbox">View Details</div>
</div>

CSS

.aligncenter {
  display: block;
  margin-right: auto;
  margin-left: auto;
}
.alignleft {
  display: block;
  margin-right: auto;
  margin-left: 0;
}
.alignright {
  display: block;
  margin-right: 0;
  margin-left: auto;
}

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

I'm sure this has been answered before but could not find an answer through previous searches because there are too many keywords involved :/

To clarify the goals:

The floating box should be overlayed in the bottom right corner of the image
The image itself should retain the same horizontal alignment as it would if I wasn't adding the overlay.
Original image should still retain it's alignment while not applying any wrapper to the images with class nowrap (a different name can be applied to align the wrapped graphics correct, if necessary)

Here is a clarifying image: Clarifying image illustrating, original, current & desired outcome

score 2 · Accepted Answer · edited May 23 '17 at 12:16

You should NOT use <div> inside <p> tag, why? I changed it to <span>.
I adjusted the jQuery slightly, added alignment classes to the parent <p> tag.
Along with some CSS updates as follows.

$(document).ready(function () {
    // has "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>');
    });
    // no  "view details" box
    $('img.nowrap').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');
        }
    });
});

.wrapper {
    position: relative;
    display: inline-block;
}
.aligncenter {
    text-align: center;
}
.alignleft {
    text-align: left;
}
.alignright {
    text-align: right;
}
.countbox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<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"></p>
<p><img src="https://farm4.staticflickr.com/3305/3493791131_cbfb113360.jpg" alt="Puppy" class="alignright nowrap" style="width:300px"></p>
<p><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></p>

Fiddle Demo: http://jsfiddle.net/tu374zy5/

score 1 · Answer 2 · answered Apr 13 '15 at 16:00

1

DEMO

Add top: 50%; left: 50%; transform: translate(-50%,-50%) to .countbox.

.countbox {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      background-color:#fff;
      padding:10px;
 }

answered Apr 13 '15 at 16:00

dowomenfart

2,803
2
15
17

Thanks you for your code but this does not answer the question. I've clarified the question because I believe I was unclear with what I was looking for. – Terri Ann Apr 13 '15 at 17:54

Centering an element that has an element positioned over it without knowing widths

2 Answers2