如何使用藍圖css框架對齊容器底部/右側/中間/中間的文本/圖像？

Question

有一些簡單的方法來對齊DIV容器東西到右側或底部：

<div class="span-24 align-right last">Text appears on the right side of the layout</div> 

或：

<div class="span-2" id="lots-of-content"></div><div class="span-22 last bottom">Appears at bottom of container</div> 

或：

<div class="span-24 vertical-middle last">Middle of the container</div> 

這裏的樣本是我正在嘗試定位下面的「topnav」：

 <div class="container"> 
     <div class="span-16"> 
      <h1>Header</h1> 
     </div> 
     <div class="span-8 last vertical-middle"> 
      <div id="topnav" class="align-right"><input type="button" id="register" class="ui-button ui-state-default ui-corner-all" value="Register" /> or <button type="button" id="signin" class="ui-button ui-state-default ui-corner-all">Sign in</button></div> 
     </div> 
     <hr /> 
... 
    </div> 

Answer 1

使用position: absolute。例如：

.align-right { 
    position: absolute; 
    right: 0; 
} 
/* Or, alternatively, */ 
.align-right { 
    float: right; 
} 

.bottom { 
    position: absolute; 
    bottom: 0; 
} 
.vertical-middle { 
    position: absolute; 
    top: 50%; 
} 

注意，對於vertical-middle，這將圍繞內容的頂部邊緣，沒有內容本身。

確保含DIV是position: relative，迫使它成爲抵消母公司（其子項的位置是相對於）編輯：換句話說，添加以下規則：

.container { 
    position: relative; 
}