CSS 将文本与图像底部对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7422398/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
align text with bottom of images
提问by Philip
Starting with the markup
从标记开始
#row { }
#label { float: left; width:100px }
#image { float: left }
<div id="row">
<div id="label">Label Here</div>
<div id="image"><img src="http://placekitten.com/100"></div>
<div id="image"><img src="http://placekitten.com/100"></div>
</div>
As shown here: http://jsfiddle.net/Hyx5n/
如图所示：http: //jsfiddle.net/Hyx5n/
I would like to move the label down to the bottom edge of the images. So it looks like this:
我想将标签向下移动到图像的底部边缘。所以它看起来像这样：
I have tried putting "position: relative" in the container and "position absolute" in the label div. But then the images are no longer in the same row: http://jsfiddle.net/Hyx5n/1/
我试过在容器中放置“位置：相对”，在标签 div 中放置“绝对位置”。但随后图像不再在同一行：http: //jsfiddle.net/Hyx5n/1/
采纳答案by FernandoH
Try it like this: http://jsfiddle.net/uac3Z/
像这样尝试：http: //jsfiddle.net/uac3Z/
Basically,
基本上，
<div id="row">
<div id="label">Label Heere</div>
<div id="images">
<div class="image"><img src="http://placekitten.com/100"></div>
<div class="image"><img src="http://placekitten.com/100"></div>
</div>
</div>
with
和
#row { position:relative; float:left; }
#label { position: absolute; bottom: 0; width:100px }
.image { float: left }
#images { margin-left: 110px }
I made a div#images that encapsulates both other div.image's. Then those div#row was set to float, having the text lying on the bottom. Hence, The div#label would appear above the image. In order to have the div#label on the left of the image, I made the div#images have a margin-left of 110px (as div#label would have 100px).
我制作了一个 div#images，它封装了其他两个 div.image。然后将那些 div#row 设置为浮动，使文本位于底部。因此， div#label 将出现在图像上方。为了将 div#label 放在图像的左侧，我将 div#images 的边距设置为 110px（因为 div#label 为 100px）。
Also note that your current div#image should be a class and not an id, because you use it more than once.
另请注意，您当前的 div#image 应该是一个类而不是一个 id，因为您多次使用它。
Hope it helps :)
希望能帮助到你 ：）
回答by Hux
You can do something like the following (http://jsfiddle.net/Hyx5n/10/). One of the many uses of vertical-alignproperty. This involves removing the <div>'s and the floatthough. You can probably replace these with <span>'s with display:inline-blockto give more flexibility.
您可以执行以下操作（http://jsfiddle.net/Hyx5n/10/）。vertical-align财产的众多用途之一。这涉及删除<div>'s 和 thefloat虽然。您可以将这些替换为<span>'s withdisplay:inline-block以提供更大的灵活性。
HTML:
HTML：
<div id="row">
<span id="label">Label Here</span>
<img src="http://placekitten.com/100" />
<img src="http://placekitten.com/100" />
</div>
CSS:
CSS：
#row { vertical-align:bottom }
#label { display:inline-block; }
