Div 的 CSS 垂直对齐方式

Question

我有一个标题，然后在其下方显示了一系列彼此相邻的元素。在选择元素的同一行上，我显示了一张图片。

我遇到的问题是我希望单个图像 (X) 对齐，以便它的底部与元素选择(A、B 和 C)的底部对齐。例如。

H1 Title             ----------
                     |        |
                     |        |
                     |    X   |
-----  -----  -----  |        |
| A |  | B |  | C |  |        |
-----  -----  -----  ----------

我遇到的问题是它看起来像这样:

H1 Title

-----  -----  -----  ----------
| A |  | B |  | C |  |        |
-----  -----  -----  |        |
                     |    X   |
                     |        |
                     |        |
                     ----------

这是我使用的 HTML:

<h1>H1 Title</h1>

<div id="items">
<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>
</div>

<div id="single_image">
        <img src="myImage.png" />
</div>

我使用的 CSS 是:

#items { 
    float:left; 
}

#items ul { 
    list-style:none; margin:0; padding:0; 
}

#items ul li { 
    display:inline; float:left; 
    margin-bottom:20px; font-size:22px; 
}

#single_image { }

#single_image img { 
    float:right; height:130px; 
    width:inherit; margin-right:40px; 
}

请问有人能帮帮我吗？我无法解决这个问题。我尝试在 CSS 的 img 上使用垂直对齐属性，但它似乎没有任何区别。

Answer 1

如果图像是固定大小，快速解决这个问题的方法就是使用负边距-顶部，这样图像就是它自己的高度 - 所以底部实际上就是顶部现在所在的位置。

例如如果图像高度为 130px，请执行以下操作:

#single_image img { margin-top: -130px; }