html - 对齐设置了 "top"的图像旁边的文本

Question

我的第一个问题是:为什么不是 this工作？

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. 使文本靠近图像(在图像的左侧)，垂直对齐到图像的中间，并通过配置其 top 的方式以图像的百分比表示 height (如果图像变短，文本会变高)。
2. 制作图片top可配置其容器的百分比 height (当容器变短时，图像变高)。

(当我说配置时，我的意思是使用 CSS，使用我会提前选择的常数)

谢谢!

编辑:

参见 updated version到目前为止。

Answer 1

试试这个....

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