html - How to position children with respect to parent in CSS? -

i using html 5 css 3. scenario this.

<div style="margin-top: 50px; background-color: red; padding: 10px 0px 10px 0px; width: 100%"> <span>this text must in center of div</span> <a href="somepage.html"><img src="/image.jpg" alt="this image must on left side of div"/></a> </div> 

the text , image must in single line. how do ?

example

to position element respect parent, give parent position value besides static (generally relative) , child position: absolute.

in keeping inline css...

<div style="margin-top: 50px; background-color: red; padding: 10px 0px 10px 0px; width: 100%; text-align: center; position: relative;">     text must in center of div     <img src="/image.jpg" alt="this image must on left side of div" style="position: absolute; left: 0;"/> </div> 

jsfiddle.

however should consider using classes, ids , external stylesheet.