我的页面顶部有一个 Logo 。它的高度约为 250px。接下来，我想要三个文本字段底部对齐(与图像)。这些字段代表用于翻译目的的英语、法语和德语缩写。
我正在使用完整的 bootstrap.css 并添加了两行(如帖子中所建议的: align text/image/links within a grid 但仍然无法使其工作。
.fixedheight { height: 250px; position:relative; }
.bottomaligned {position:absolute; bottom:0; }
ENG 和 FRA 需要额外的 css 行
.bottomaligned2 {position:static; bottom:0; }
HTML 代码是:
<body>
<div class="container">
<div class="row fixedheight">
<div class="span3 offset4">
<img src="./images/logo.jpg" alt="Logo">
</div><!-- /span -->
<div class="span1 bottomaligned">
NED
</div><!-- /span -->
<div class="span1 bottomaligned2">
ENG
</div><!-- /span -->
<div class="span1 bottomaligned2">
FRA
</div><!-- /span -->
</div><!-- /row -->
</div><!-- /container -->
</body>
有人能给我指明完成这项工作的正确方向吗？
谢谢，
格特
最佳答案
经过一些实验和@DaveP的提示，终于找到了解决方案。
新的 CSS 代码:
.fixedheight { height: 250px; position:relative; }
.bottomaligned {position:relative; top:80%; height:10em; margin-top:-5em}
无需选择 position:absolute，因为 Twitter Bootstrap 中的 div 会处理这个问题。
HTML:
<body>
<div class="container">
<div class="row fixedheight">
<div class="span3 offset4">
<img src="./images/logo.jpg" alt="Logo">
</div><!-- /span -->
<div class="bottomaligned">
<div class="span1">
ENG
</div><!-- /span -->
<div class="span1">
NED
</div><!-- /span -->
<div class="span1">
FRA
</div><!-- /span -->
</div>
</div><!-- /row -->
</div><!-- /container -->
</body>
现在这给了我一个从第五列开始的图像，文本几乎在图像的右侧底部对齐。
关于css - Twitter Bootstrap : bottom align text next to image，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11292644/