将文本与图片底部对齐

Question

从标记语言开始

#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>

如图所示：http://jsfiddle.net/Hyx5n/ 我希望将标签移到图像的底部边缘，效果如下所示： 我已尝试将 "position: relative" 放置在容器中，并将 "position absolute" 放置在标签 div 中。但是此时图片不再处于同一行：http://jsfiddle.net/Hyx5n/1/

- Philip

Answer 1

你可以尝试以下方法(http://jsfiddle.net/Hyx5n/10/)，其中使用了 vertical-align 属性的许多用途。这涉及消除 <div> 和 float。你可以用 display:inline-block 替换这些元素，使用 <span> 更加灵活。

HTML:

<div id="row">
    <span id="label">Label Here</span>
    <img src="http://placekitten.com/100" />
    <img src="http://placekitten.com/100" />
</div>

CSS：

#row { vertical-align:bottom }
#label { display:inline-block; }

- Hux

---

谢谢，这个方法很有效，如果你不需要div的话会更简单。但是在我的实际版本中，我确实使用了div，因为我有图片，但也有绝对定位在每张图片上方的文本。虽然也许可以用inline-block spans来实现，我会尝试一下。 - Philip

谢谢。这很有帮助。顺便说一下，在Bootstrap 3中，img具有默认的垂直居中对齐方式，因此请将style="vertical-align: baseline"添加到img。 - Natan Rubinstein

Answer 2

像这样尝试一下：http://jsfiddle.net/uac3Z/

基本上，

<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>

使用

#row { position:relative; float:left; }
#label { position: absolute; bottom: 0; width:100px }
.image { float: left }
#images { margin-left: 110px }

我创建了一个div#images，它封装了其他的div.image。然后这些div#row被设置为浮动，使文本位于底部。因此，div#label将出现在图像上方。为了使div#label出现在图像左侧，我使div#images具有110px的margin-left（因为div#label将具有100px）。

另外请注意，您当前的div#image应该是一个类而不是一个id，因为您使用它超过一次。

希望能对您有所帮助 :)

- FernandoH