如何在 twitter bootstrap css 的网格 <div> 中对齐文本/图像/链接？答案

【问题标题】：how can I align text/image/links within a grid <div> of the twitter bootstrap css?如何在 twitter bootstrap css 的网格 <div> 中对齐文本/图像/链接？
【发布时间】：2012-03-16 09:20:36
【问题描述】：

我正在尝试使用 Twitter 的引导 CSS 框架，并且到目前为止只有网格布局。现在我只想将每个网格单元<div> 的内容与底部对齐。我显然根本不是 CSS 爱好者。

这是html：

<div class="container">
    <div class="row">
        <div class="span4">
            <a href="index.php"><img src="someprettyhighimage.gif"/></a>
        </div>
            <div class="span8">
                some text/links that need to be bottom aligned
            </div>
        </div
    </div>
</div>

我找不到使第二列 <div> 与文本（和/或第一列）底部对齐的方法。

有人知道我需要的 css 魔法吗？（或者我如何让<div>s 底部对齐？

非常感谢，

塞巴斯蒂安

【问题讨论】：

标签： css html twitter-bootstrap vertical-alignment

【解决方案1】：

需要将class="row" div的position属性设置为relative，然后将包含文本的div的position属性设置为absolute，bottom属性设置为0。

.row { position: relative; }
.span8 { position: absolute; bottom: 0; }

在 jsfiddle 上查看：

http://jsfiddle.net/A8XE2/

【讨论】：

您好 kdub，感谢您的提示！我不想覆盖原始类（行、spanX），因为它们是引导框架的一部分，我可能会在另一个上下文中再次使用它们。但是我将 jsfiddle jsfiddle.net/A8XE2/4 更新为似乎可行的东西。我更新了 jsfiddle
这将是我的下一个建议......很高兴你明白了......你应该将我的答案标记为正确 ;-) 谢谢