围绕中心图像的DIV

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>