C'est la fin du projet CSSActif, vous trouverez les explications ici : Fin de CSSActif, ouverture du forum. Le forum reste cependant ouvert à tous et ses ressources sont entièrement disponibles. Merci à tous !
Derniers sujets

Partagez | 
 

Centrer horizontalement un bloc

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Voir le profil de l'utilisateur
avatar
Administrateur
Administrateur

Masculin Messages : 1819



Centrer horizontalement un bloc


Informations générales

Description :
Je vais vous expliquer ici comment centrer horizontalement et proprement un bloc.

Quand je parle de "centrer" un bloc, je ne parle non pas du texte, mais bien d'un élément de la page (voir la démo).

Démo :
Mon bloc est centré !

Testé sur :
Firefox, Chrome, Safari, Opera, Internet Explorer

Crédits :
Proposé par Espeon le 03/01/2013 | Validé par Doare

Mise(s) à jour :
Pas de mise à jour pour l'instant

Le tutoriel


Introduction


Centrer horizontalement un bloc est bien plus facile que de tenter de le centrer verticalement, fort heureusement.

Cette technique pourrait permettre à bon nombre d'entre vous de produire des codes plus corrects en évitant autant que possible de créer des tableaux pour positionner vos éléments (même si c'est l'apanage de ForumActif en version PHPBB2). Un élément - pouvant être défini comme un bloc finalement - peut (doit) être centré sans avoir à passer par un enchaînement de <table> et autres <tr> <td>.

Les erreurs classiques


Beaucoup font l'erreur de penser que la balise <center> permet de centrer son contenu. Retenez une bonne fois pour toute que cette balise est obsolète et ne doit jamais être utilisée. Il en va de la maintenabilité de votre forum dans le temps, de la validité de votre code et du grand principe de "on sépare le fond de la forme nomdidiou".

De plus, et tout comme la propriété text-align: center; cela ne fonctionnera tout simplement pas puisque cela va centrer le contenu de type inline (texte, images, <span>, ...) de votre bloc et non pas le bloc lui-même.

Le CSS


A partir du moment où votre élément est un bloc et qu'il a une largeur définie, alors il devient très facile de centrer ce bloc en appliquant une marge à gauche et à droite. Et cette marge est automagiquement calculée, ce qui permet d'utiliser la propriété margin afin de centrer de manière certaine notre bloc.

Nous allons créer la classe .center-block dans le CSS de votre forum, qui nous permettra de centrer automatiquement le bloc auquel elle sera appliquée.

Rendez-vous dans Panneau d'Administration > Affichage > Couleurs > Feuille de Style CSS. Placez le code suivant :
Code:
.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

display: block; permet de nous assurer que l'élément portant la classe est un élément de type block, sans quoi cela ne fonctionnerait pas. Cela signifie que votre classe fonctionnera sur n'importe quel élément (vu qu'il le transformera en élément de type block).

margin-left et margin-right prennent la valeur magique auto qui va calculer automatiquement la marge nécessaire pour centrer horizontalement l'élément.

Notez que vous pouvez utiliser la notation raccourcie margin: 0 auto;


Le HTML


Il vous suffit d'utiliser la classe fraîchement créée dans votre forum, sur votre PA par exemple ou tout autre bloc que vous souhaitez positionner au centre de son conteneur :
Code:
<div class="center-block">Mon bloc centré !..</div>

Ne pas oublier...


Définir une largeur


Pour que cela fonctionne, il faut que votre bloc ait une largeur définie. C'est normalement le cas si celui-ci contient quelque chose : le bloc va alors prendre toute la largeur disponible (conceptuellement parlant, on peut considérer qu'il est centré du coup xD ).

Si votre bloc ne contient rien mais qu'il doit tout de même s'afficher, ou que vous souhaitez tout simplement fixer sa largeur, il vous faudra penser à lui définir une largeur spécifique avec width. Comme cette largeur est spécifique à votre élément, il est préférable de créer une autre sélecteur, qui va cibler votre élément pour lui rajouter une largeur, de la manière suivante (par exemple) :
Code:
.center-block {
    display: block;
    margin: 0 auto;
}

.large-block {
    width: 400px;
}

Code:
<div class="large-block center-block"></div>

Le but étant d'isoler la classe .center-block pour qu'elle remplisse exclusivement son rôle : centrer votre élément. C'est une bonne pratique de CSS à prendre qui consiste à créer des classes réutilisables.

Centrer verticalement


A ce stade-là vous pourriez penser que :

Votre fausse bonne idée a écrit:
... c'est super le truc du margin: auto ! Du coup, pour centrer verticalement, il suffit de définir une hauteur au bloc et d'appliquer une marge automatique en haut et en bas ! Et, et, ...

... et malheureusement, ça ne marche pas comme ça.

Il faut employer d'autres techniques pour contourner le problème et je dois reconnaître que ce n'est véritablement pas une chose aisée.

Ce sera l'objet d'un deuxième (plus gros) tutoriel sur la question, afin de vous présenter les "meilleures techniques" que je connaisse à l'heure actuelle afin de centrer facilement et le plus correctement possible vos éléments.




Dernière édition par Espeon le Mar 15 Jan 2013, 12:08, édité 9 fois
MessageSujet: Centrer horizontalement un bloc   Jeu 03 Jan 2013, 10:18
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
Administrateur
Administrateur

Masculin Messages : 1819



FAQ


Q
//

R
//


Pour toute question sur ce tutoriel, merci de poster une demande d'aide ici :
http://www.css-actif.com/f17-aide-css-xhtml


MessageSujet: Re: Centrer horizontalement un bloc   Jeu 03 Jan 2013, 10:21
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
Administrateur
Administrateur

Masculin Messages : 1819



16-01-2013 - Tutoriel validé par Doare


MessageSujet: Re: Centrer horizontalement un bloc   Mer 16 Jan 2013, 09:26
Revenir en haut Aller en bas
Contenu sponsorisé




MessageSujet: Re: Centrer horizontalement un bloc   
Revenir en haut Aller en bas
 

Centrer horizontalement un bloc

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Centrer verticalement et horizontalement, des éléments dans un tableau.
» Centrer les fenêtres
» [Résolu] [XHTML] Besoin d'aide simple avec div class="aside"
» Problème pour centrer le "qui est en ligne ?"
» Image de fond extensible avec un logo toujours centrer

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: Tutoriels de CSSActif :: Bases CSS & xHTML :: Bases de CSS-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forum gratuit