html - 将图像与基线对齐

Question

我需要构建如下布局

+-------+-----------------------------+-------+
|       |                             |       |
|       |                             |       |
|   A   |             B               |   C   |
|       |                             |       |
|       |                             |       |
|       |                             |       |
+-------+-----------------------------+-------+

在区域 A 中，我想放置一张与右上角对齐的图像。 在 B 区，我想放置一个居中的图像(垂直和水平) 在 C 区，我想放一张左下角对齐的图片

我有以下标记。

<div style="float: left;">
    <img src="/images/sx.jpg" alt="sx" height="100" width="90" />
</div>
<div class="slideshow" style="float: left;">
    [...]
</div>
<div style="float: right;">
    <img src="/images/dx.jpg" alt="dx" height="100" width="90" />
</div>

我尝试使用 CSS vertical-align 但它不起作用。我怎样才能得到我想要的？ 感谢您的帮助

Answer 1

    <div style="float: left;">
    <img src="/images/sx.jpg" alt="sx" height="100" width="90" />
</div>
<div class="slideshow" style="padding:25% 50%; ">
    [...]
</div>
<div style="float: right; margin-top: -51.5%;">
    <img src="/images/dx.jpg" alt="dx" height="100" width="90" />
</div>

而且，请不要问为什么 51.5% - 它工作得很好(在 Chrome 中检查过)，为什么 - 我自己也不知道)