[英]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. 在选择项目的同一行上,我显示一张图片。
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). 我遇到的问题是我希望将单个图像(X)对齐,以使其底部与所选项目(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 |
| |
| |
----------
Here is the HTML Im using: 这是使用的HTML Im:
<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>
The CSS I'm using is: 我正在使用的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;
}
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. 我尝试在CSS中的img上使用vertical align属性,但是似乎没有任何区别。
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. 如果图像是固定大小,则快速解决此问题的方法是简单地使用负的页边距顶部,以便图像位于其自身上方的高度-因此底部实际上是顶部所在的位置。
Eg If the image is 130px height, do: 例如,如果图像高度为130px,请执行以下操作:
#single_image img { margin-top: -130px; }
One potential solution is to wrap them in a container and absolutely position #items to the bottom of the container. 一种可能的解决方案是将它们包装在容器中,并将#items绝对定位在容器的底部。 Here is a sample: 这是一个示例:
http://jsfiddle.net/5csWH/ http://jsfiddle.net/5csWH/
<div class="container">
<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>
<div class="clearfix"></div>
</div>
CSS: CSS:
#items { float:left; }
#items ul { list-style:none; margin:0; padding:0; position: absolute; bottom: 0; }
#items ul li { float:left; margin-right:20px; font-size:22px; width: 50px; background: #DDD; }
#single_image { }
#single_image img { float:right; height:130px; width:inherit; background: #DDD; }
.container { width: 50%; margin: 0 auto; background: #EEE; position: relative; }
.clearfix { clear: both; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.