Twitter Bootstrap：将图像旁边的文字对齐

问题描述：

我的页面顶部有一个徽标。大约250px高。在此旁边，我希望有三个文本字段与底部对齐（与图像）。这些字段代表英文，法文和德文的缩写以用于翻译目的。Twitter Bootstrap：将图像旁边的文字对齐

我使用的是完整的bootstrap.css并加入两行（如sugested在后：align text/image/links within a grid但仍无法得到它的工作

为ENG和FRA

.fixedheight { height: 250px; position:relative; } 
.bottomaligned {position:absolute; bottom:0; }

一个额外的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>

有人能指出我在里ght方向完成这项工作？
谢谢，
格特

当你说'不能工作'时，它在做什么？ – DaveP

使用显示的代码，它显示在左下角NED和中间（稍高）的图像中。在右边是ENG和FRA彼此相邻。 – user1037763

刚才注意到'position：static'在上面。来自http://www.barelyfitz.com/screencast/html-training/css/positioning/“所有元素的默认定位是position：static，这意味着元素没有放置并发生在文档中通常会出现的位置。通常情况下，你不会指定这个，除非你需要覆盖之前设置的定位。“你不应该使用'position：absolute'吗？ – DaveP

答

终于找到了一些试验后的溶液和@DaveP的暗示。

新的CSS代码：

.fixedheight { height: 250px; position:relative; } 
.bottomaligned {position:relative; top:80%; height:10em; margin-top:-5em}

没有必要选择position:absolute作为Twitter的引导的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>

这对于现在给我的图像与图像的右侧文本几乎底部对齐开始在第5列。

Twitter Bootstrap：将图像旁边的文字对齐

相关推荐