CSS垂直对齐方式 [英] CSS Vertical Alignment of Div

问题描述

我有一个标题，然后在下面，我显示一个选择的项目，彼此相邻。

I have a heading, then below that I display a selection of items next to each other. On the same line as the selection of items I display a single picture.

我遇到的问题是我想让单张图片（X）对齐其底部与项目（A，B和C）的选择的底部一致。例如

The issue I'm having is that I want the single image (X) to be aligned so that the bottom of it is in line with the bottom of the selection of items (A, B & C). Eg.

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

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

The issue I'm having is that it appears like so:

H1 Title

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

<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垂直align属性，但它似乎没有任何区别。

Please could someone help me out? I can't work out the issue. I tried using the vertical align attribute on the img in the CSS, however it didn't seem to make any difference.

推荐答案

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

If the image is a fixed size, a quick fix for this problem would simply be to use a negative margin-top, so that the image is its own height above - so bottom is actually where the top is now.

例如如果图片高度为130像素，请执行：

E.g. If the image is 130px height, do:

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

这篇关于CSS垂直对齐方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！