DIV around a centered image - html

Question

I am trying to display an image, centered vertically and horizontally on a screen (which in my case, is a modal screen). The image must be a maximum of 80% high, and 80% wide. It can be landscape, square or portrait.
I have achieved that. But now I need to add a div, fitted tightly around the image, so that I can apply a text-over effect.
This is what I have so far.
https://jsfiddle.net/Cralis/1w8d4zx5/
<div class="imageContainer">
<img id="imgContainer" class="fullimage animated fadeIn" src="http://cameraflare.com/photostore/23d255d8-e259-47ee-be2d-fae68c730f6d/afda43dd-5a81-40b2-8161-d1f222689d3f.jpg">
<h2>
<span>The one and only:
<span class='spacer'></span>
<br />
<span class='spacer'></span>
The Hulk
</span>
</h2>
</div>
I am trying to achieve what this tutorial shows, except, their demo is aligned left on the screen. My image is centered.
https://css-tricks.com/text-blocks-over-image/
How can I get the imageContainer div to 'hug' the image?

Answer 1

Not pretty sure but i think what you are looking for is the following:
Set your .imageContainer as display: inline-block and add it text-align: left
Set the parent of image container to text-align: center
So you will get your div centered but you will also wrap/hug the image with the border. Take a look here:
https://jsfiddle.net/0k3wrfxt/

Answer 2

you can use css3 flexbox concept to achieve this.
add the following styles to the parent container of your image
display:flex;
align-items:center;
justify-content:center;
and remove the margin:100px; on your .imageContainer ,it will work fine .I'm added the snippet below.
html,body{
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
}
.fullimage {
vertical-align: top;
display: block;
margin: auto;
border-radius: 7px;
}
.imageContainer {
max-height: 80vh;
max-width: 80vw;
border: solid;
/*margin: auto;
margin-left:100px;*/
position: absolute;
padding: 0;
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0);
/* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
h2 span.spacer {
padding: 0 5px;
}
<div class="imageContainer">
<img id="imgContainer" class="fullimage animated fadeIn" src="http://cameraflare.com/photostore/23d255d8-e259-47ee-be2d-fae68c730f6d/afda43dd-5a81-40b2-8161-d1f222689d3f.jpg">
<h2>
<span>The one and only:
<span class='spacer'></span>
<br />
<span class='spacer'></span>
The Hulk
</span>
</h2>
</div>