CODEWITHSUNDEEP
htmlcss
user606521
user606521

Reputation: 15434

Align text to image in auto-width container that stretches to image width

Here is fiddle https://jsfiddle.net/qyLjxwrv/1/.

As you can see left and right titles are aligned to screen corners, while I would like to align them to image corners. Trying it for 2hours without a 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 that I don't want titles to appear inside image, but above it and aligned with left and right corner of image.

Upvotes: 1

Views: 45

Answers (1)

Stickers
Stickers

Reputation: 78686

It seems that you can do it like this simply, and see the 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 with the gray background color partly and full page.

Upvotes: 2

Related Questions