html - Align text next to an image that has "top" set -

my first question is: why isn't this working?

1. the text should in middle of image, not in bottom, since used vertical-align: middle;.
2. there should space between image , top, since used top: 10%;.

.card {    text-align: right;    background-color: blue;    color: white;  }    .card .inline-container {    display: inline-block;    vertical-align: middle;  }    .card #person-photo {    display: inline-block;  }    .card .photo{    top: 10%;  }    .card #person-photo, .card #details {    position: relative;  }

<div class="card" dir="rtl">      <div id="person-photo">          <img src="http://tinyurl.com/mwy4v3h" class="photo"/>      </div>      <div class="inline-container">          <div id="details">hello</div>      </div>  </div>

and second question how to:

1. make text near image (to left of it), vertically aligned middle of image way configure top in percentage of image's height (if image gets shorter, text becomes higher).
2. make image top configurable in percentage of container's height (when container gets shorter, image becomes higher).

(when configure mean css, using constant numbers choose in advance)

thanks!

edit:

see updated version far.

try ....

<p>this text.<img src="http://tinyurl.com/mwy4v3h" align="top"/>again text </p>