将文本与已设置"top"的图像对齐

Question

我的第一个问题是：为什么这不起作用？

1. 文本应该在图像的中间，而不是在底部，因为我使用了vertical-align: middle;
2. 由于我使用了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>

我的第二个问题是如何：

1. 使文本靠近图像（在图像的左侧），与图像的中间垂直对齐，方法是以图像的height的百分比配置其top（如果图像变短，文本变高）
2. 使映像top按其容器的height的百分比进行配置（当容器变短时，映像会变高）

（当我说配置时，我指的是使用CSS，使用我将提前选择的常量）

谢谢！

编辑：

请参阅迄今为止的更新版本。

Answer 1

试试这个。。。。

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