Positionnements des éléments d'une page

Les différentes zones et éléments (balises) de la page HTML s'empilent, par défaut, les uns en dessous des autres à l'intérieur du mouvement vertical de haut en bas nommé "flux".
Deux types principaux d'éléments sont ainsi amenés à "défiler" :

  • les éléments inline (par défaut en CSS : display: inline)
  • les éléments bloc (par défaut en CSS : display:block)

Chacun de ces types d'éléments sont répertoriés dans les listes suivantes:


Les images <img> et les paragraphes <p> sont des éléments de type inline.
Les divisions <div> sont des éléments de type bloc.

Pour contraindre des éléments blocs à ne pas passer les uns en dessous des autres (la règle par défaut), il est nécessaire d'introduire la notion d'élément "flottant". Ce flottement permet donc de positionner les blocs côte à côte (cas des colonnes, par exemple).
Bootstrap a prévu deux classes, pull-right pour le flottement à droite et pull-left pour le flottement à gauche :

.pull-right {
	float:right
}
.pull-left {
	float:left
}


La contrainte exercée sur les éléments du flux de la page à flotter à droite ou à gauche doit être annulée pour rétablir le flux par défaut. Pour réaliser cette opération, bootstrap introduit la classe "clearfix" :

Une division de classe "clearfix" doit suivre la fin d'un positionnement flottant; si vous l'omettez, les éléments suivants en seront affectés et ne seront pas correctement positionnés.

CSS

.clearfix {
	*zoom:1
}
.clearfix:before,.clearfix:after {
	display:table;
	line-height:0;
	content:""
}
.clearfix:after {
	clear:both
}

Aligner un élément inline à gauche

CSS

.text-left {
	text-align:left
}

HTML

<p class="text-left">un paragraphe aligné à gauche (règle par défaut)</p>

un paragraphe aligné à gauche (règle par défaut)



élément bloc flottant à gauche

CSS

.pull-left {
	float:left
}


HTML

""
<div class="pull-left">
<img src="http://yeswiki.net/files/YesWikiKekako_wikibus_20121228150140_20121228150335.jpg" alt="wikibus" />
</div>
<div class="clearfix"></div>
""

wikibus

Aligner un élément inline à droite

CSS

.text-right {
	text-align:right
}

HTML

<p class="text-right">un paragraphe aligné à droite</p>

un paragraphe aligné à droite



élément bloc flottant à droite

CSS

.pull-right {
	float:right
}

HTML

""
<div class="pull-right">
<img src="http://yeswiki.net/files/YesWikiKekako_wikibus_20121228150140_20121228150335.jpg" alt="wikibus" />
</div>
<div class="clearfix"></div>
""

wikibus

Centrer un élément inline

CSS

.text-center {
	text-align:center
}

HTML

""<p class="text-center">un paragraphe centré</p>""

un paragraphe centré



Centrer un élément bloc

Apparemment, selon le template Yeswiki utilisé, ou selon les effets de telle ou telle règle CSS personnalisée, cette classe peut ne pas fonctionner. Par exemple, elle ne fonctionne pas sur cette page (le paragraphe reste obstinément à gauche) bien que le même code soit fonctionnel dans un autre wiki. La classe "text-center" n'est donc pas toujours adaptée. Une classe "center", non présente dans bootstrap, ajoutée dans la feuille de style de votre modèle personnalisé (ou dans une balise style en haut de la page), peut être une solution.
""
<style>
.center {
	text-align:center;
	margin-left:auto;
	margin-right:auto
		}
</style>
""

HTML

""
<img class="img-circle center" src="http://yeswiki.net/files/YesWikiKekako_wikibus_20121228150140_20121228150335.jpg" alt="wikibus" />
</div>
""

wikibus