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方向完成這項工作？
謝謝，
格特

來源

2012-07-02 user1037763

當你說'不能工作'時，它在做什麼？ – 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列。

來源

2012-07-02 20:05:23 user1037763

Twitter Bootstrap：將圖像旁邊的文字對齊

回答

相關問題