blueprint 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을 사용하십시오. vertical-middle를 들어,이 내용의 위쪽 가장자리, 아니 콘텐츠 자체를 중심 것으로

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

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

참고 : 예를 들면.

확인합니다 DIV를 포함하는 position: relative이 편집 (아이들의 위치를 ​​기준으로) 오프셋 부모가되기 위해 그것을 강제하는 것입니다 있는지 확인하십시오

.container { 
    position: relative; 
}