Comment aligner du texte/des images en bas/à droite/au centre/au milieu d'un conteneur à l'aide du framework blueprint css?

Question

est-il un moyen facile d'aligner des choses dans des conteneurs div à droite ou en bas:

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

ou:

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

ou:

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

Voici un échantillon de ce que je travaille avec essayer de positionner le "topnav" ci-dessous:

 <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

Utilisez position: absolute. Par exemple:

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

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

Notez que pour vertical-middle, ce sera le centre bord supérieur du contenu, pas le contenu lui-même.

Assurez-vous que les contenant DIV est position: relative pour le forcer à devenir le parent de décalage (qui la position des enfants sont par rapport à) EDIT: En d'autres termes, ajouter la règle suivante:

.container { 
    position: relative; 
}