Discussion:Les enquêtes non résolues des séries Tv:Csi Miami
Quelques petites fautes, mise en page à chier, mais c'est bien sympatoche, même si je connais pas CSI machin. Tu dois utiliser l'attribut center et indiquer une taille pour les images, de cette manière : [[Image:xxxx.jpg|300px|center]]. Tu peux même ajouter |thumb|blablabla pour mettre une légende, même si là ça sert à rien. χλςmith ΤrismégistΞ ⇒
- Ou alors, tu peux utiliser une balise <center>, mais c'est un peu une technique bâtarde. WTHellias
151.54.60.199 est un vieux con lol janvier 12, 2014 à 14:45 (UTC)
Ou alors tu peux utiliser le centrage horizontal des éléments de type en-ligne :
Tu veux centrer horizontalement un élément de type "en-ligne" au sein d'un bloc ?
La propriété CSS text-align est prévue pour s'appliquer sur un élément bloc (conteneur) et contrôlera l'alignement (gauche, droite, centré, justifié) de tous les élements de type "en-ligne" contenus dans ce bloc conteneur. C'est exactement ce qu'il te faut !
Il te suffit donc par exemple de procéder ainsi pour centrer une image au sein d'un élément div :
centrage {text-align: center;}
Le centrage horizontal des éléments de type bloc
Pour centrer horizontalement un élément (bloc, balise ou un site web entier) en CSS, il suffit de donner une largeur (width) à l'élément et les valeurs "auto" aux marges latérales. Donnons à notre bloc l'id global :
#global {
margin-left: auto;
margin-right: auto;
width: ...; /* largeur obligatoire pour être centré */
}
|
Note : Les marges du code fournies ci-dessus peuvent s'écrire de façon raccourcie : #global {margin: 0 auto;}
De cette manière, il équilibrera automatiquement les marges latérales.
Tu places votre bloc div conteneur dans ton code HTML : div id="global"
Il suffit ensuite de placer le reste du contenu dans #global et ton objet sera centré proprement. Donc :
body {
margin: 0; /* pour éviter les marges */
}
|
Il faudra ensuite rétablir l'alignement texte dans #global, ce qui donne :
#global {
margin-left: auto;
margin-right: auto;
width: ...;
}
|
Attention à ne pas oublier de définir une largeur pour l'élément à centrer, sinon il ne pourra logiquement pas être centré (il occupera toute la largeur disponible, comme tous les blocs par défaut). Attention également : cette méthode de marges automatiques ne va pas centrer un bloc s'il est positionné en absolu (voir la partie ci-dessous).
N'oublie pas le Doctype !
Attention à ne pas oublier le doctype du document sinon votre page sera en mode quirks. Dans ce mode, Internet Explorer se comporte comme les versions antérieures à IE6, c'est à dire qu'il n'interprète pas les dimensions et les marges comme il le faudrait. Dans ce cas précis, il n'appliquerait pas le centrage à l'aide des marges automatiques.
Cas des éléments positionnés
Pour les sites dont les éléments internes sont positionnés en "position: absolute" ou "position: relative", la technique des marges latérales automatiques ne fonctionne pas par défaut.
En effet, si ton conteneur est placé dans le flux (avec des marges) et que ton contenu est positionné (absolu ou relatif), ce dernier sort du flux et donc du conteneur. Il se placera alors par rapport au dernier parent positionné : le document.
Pour éviter ce problème, il faut absolument que le conteneur soit lui-même positionné. En lui donnant une position relative, tu peux garder son centrage avec marges automatiques, tout en incorporant du contenu lui aussi positionné..
Exemple de conteneur prévu pour un contenu avec des éléments positionnés :
#global {
position: relative; /* on positionne le conteneur */
margin-left: auto;
margin-right: auto;
width: ...;
text-align: left;
}
|
Et voilà pour le centrage horizontal. Mais bon c'est une méthode un peu bâtarde.
Le centrage vertical
Pour le centrage vertical, c'est une autre histoire !
Il existe un attribut vertical-align, mais ça ne marche pas tout le temps, je t'en parle, si tu veux. χλςmith ΤrismégistΞ ⇒ janvier 12, 2014 à 15:04 (UTC)