html - Align text to image in auto-width container that stretches to image width -
here fiddle https://jsfiddle.net/qyljxwrv/1/.
as can see left , right titles aligned screen corners, while align them image corners. trying 2hours without success...
.wrapper { position: absolute; left: 0px; right: 0px; top: 0px; background-color: rgba(213,213,213,.5); text-align: center; } .info { text-align: left; } .right-title { float: right; }
<div class="wrapper"> <div class="inner"> <div class="info"> <span class="left-title">left</span> <span class="right-title">right</span> </div> <img src="http://i.imgur.com/crcopps.jpg" /> </div> </div>
note don't want titles appear inside image, above , aligned left , right corner of image.
it seems can simply, , see comments inline.
.wrapper { display: table; /*shrink-to-fit*/ margin: 0 auto; /*center*/ } .wrapper img { max-width: 100%; /*responsive*/ } .left-title { float: left; /*left*/ } .right-title { float: right; /*right*/ }
<div class="wrapper"> <div class="inner"> <div class="info"> <span class="left-title">left</span> <span class="right-title">right</span> </div> <img src="http://i.imgur.com/crcopps.jpg" /> </div> </div>
Comments
Post a Comment