html - Set caption to always begin in the photo's left corner -

i have photo caption. works nicely when browser not bigger photo size. when bigger, photo in center. don't know how can make caption begin in photo's left corner.

html

<div> <img id="pht" src="http://farm4.static.flickr.com/3065/2741653860_468fda7e7a.jpg">     <span id="cap">photo caption</span>      </div> 

css

#pht{ position:relative;     display: block; margin-left: auto; margin-right: auto;  } #cap{position:absolute;   background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0;      color: yellow;     display: inline-block;     font: bold 13px/30px helvetica,sans-serif;     letter-spacing: -1px;     padding-left: 5pt;     padding-right: 5pt;    } 

fiddle: http://jsfiddle.net/qpxkypn8/

try this..

html

<div>     <div id="dpht"><img id="pht" src="http://farm4.static.flickr.com/3065/2741653860_468fda7e7a.jpg"></div>     <span id="cap">photo caption</span> </div> 

css

div{     max-width: 500px;     margin: 0 auto; } #dpht{     display: flex;     flex-direction: row; } #pht{     display: block; } #cap{     flex: none;   background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0;      color: yellow;     display: inline-block;     font: bold 13px/30px helvetica,sans-serif;     letter-spacing: -1px;     padding-left: 5pt;     padding-right: 5pt;    } 

check out fiddle