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.

updated demo

.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>

edit: demos gray background color partly , full page.


Comments

Popular posts from this blog

Fail to load namespace Spring Security http://www.springframework.org/security/tags -

sql - MySQL query optimization using coalesce -

unity3d - Unity local avoidance in user created world -