将text-div对齐到图像顶部的右下方

Question

I have a 'text-box' that changes size depending on the length of the sentence (string) that it gets from a database.

I want this text to appear on the bottom right of the actual image, but somehow the div is bigger than the actual image.

How to determine the bottom of the image?

 #header-img { position : absolute; top : 0px; left : 0px; min-width : 100%; min-height : 50%; display : inline-block; } #topimg { position : absolute; width : 100%; top : 0px; z-index : -1; } #textblock{ text-align : center; width : 46%; max-height : 20%; position : absolute; bottom : 0; right : 0; } 

 <div id="header-img" class="container-fluid span12"> <img id="topimg" src="./img/top_image.jpg" class="center-block img-responsive"> <div id="textblock"> <span id="rotate">Random Sentences!</span> </div> </div> 

Answer 1

maybe wrapping image and text together ?

 figure { display: inline-block; position: relative; overflow: hidden; } img { display: block; /* or vertical-align:top; */ } figcaption { position: absolute; background: red; color: yellow; font-weight: bold; text-align:center; padding: 0.25em 2.5em; bottom: 0; max-width: (100% + 2em); right: -1em; transform: rotate(-25deg); transform-origin: 4.5em -2.5em; box-shadow: 0 0 5px black; } 

 <figure> <img src="http://lorempixel.com/300/180/" /> <figcaption> rotate me ? </figcaption> </figure> <figure> <img src="http://lorempixel.com/300/180/" /> <figcaption> or rotate me not ? </figcaption> </figure> <figure> <img src="http://lorempixel.com/300/180/" /> <figcaption> longer text ? or rotate me not ? </figcaption> </figure> 

Answer 2

Make the image the same width as the wrapper, #header-img in your example, then use the wrapper to position the text.

 #header-img { position : relative; min-width : 100%; min-height : 50%; } #topimg { display: block; width : 100%; } #textblock{ text-align : center; width : 46%; position : absolute; bottom : 0; right : 0; color: #FFF; background-color: rgba(0, 0, 0, 0.6); } 

 <div id="header-img" class="container-fluid span12"> <img id="topimg" src="http://lorempixel.com/400/400" class="center-block img-responsive"> <div id="textblock"> <span id="rotate">Random Sentences!</span> </div> </div>