IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
logo
Sommaire > Marges et alignements (CSS)
        Comment centrer horizontalement n'importe quel élément en CSS ?
        Comment décaler un objet vers la droite, sans pour autant le centrer ?
        Comment éviter dans une page le retour à la ligne d'une phrase ?
        Comment justifier du texte ?
        Comment provoquer le saut de page au bout d'un certain nombre de lignes ?
        Comment simuler le style CSS 'position : fixed' sous Internet Explorer, sans utiliser de javascript ?
        Pourquoi les propriétés text-align ne fonctionnent pas sur les éléments de type SPAN ?



Comment centrer horizontalement n'importe quel élément en CSS ?
auteur : regbegpower
On peut le faire en CSS grâce au code présenté ci-dessous
Corps de la page (X)HTML
<body>
  <div class="centrer">Mon bloc centré horizontalement</div>
</body>
Et le code CSS utile au positionnement
body {
  margin : 0px; 
  padding : 0px;
  text-align: center; /* pour résoudre le bug de centrage de IE */
}
				
.centrer {
  margin-left : auto;
  margin-right : auto;
  width : 400px;
  text-align : left;  /* pour résoudre le bug de centrage de IE */
}
Note : Il faut obligatoirement spécifier une largeur width au bloc à centrer.


Comment décaler un objet vers la droite, sans pour autant le centrer ?
auteur : Jérôme
Il faut utiliser les marges en CSS (margin-xxx), qui peuvent être appliquées aux 4 côtés :
  • top : haut
  • bottom : bas
  • right : droite
  • left : gauche

Code CSS relatif au décalage vers la droite :
CSS correspondant au décalage vers la droite
.decalage { 
  margin-left : 50px 
}
Utilisation du CSS précédent dans la page (X)HTML :
<div class="decalage">Mon bloc décalé de 50 pixels vers la droite</div>
Note : Les marges peuvent être appliquées à n'importe quel élément.


Comment éviter dans une page le retour à la ligne d'une phrase ?
auteurs : Eric Berger, Linaa
Il faut placer le texte dans un tableau et utiliser l'attribut nowrap dans une cellule td, qui empêche les retours à la ligne automatiques.
<table>
  <tr>
    <td nowrap>Mon texte sans retour à la ligne auto</td>
  </tr>
</table>
On peut également utiliser la balise nobr
<nobr>Mon texte très très long, sur une ligne</nobr>
Note : Des barres de défilement horizontaux risque d'apparaître.


Comment justifier du texte ?
auteur : debug
Pour justifier un texte (aligner à droite et à gauche), il faut utiliser la propriété text-align, qui peut prendre comme valeur :
  • left : gauche
  • right : droite
  • center : centré
  • justify : justifié

Exemple :
Code CSS nécessaire
.justifie { 
  text-align : justify; 
}
Dans la page (X)HTML :
Code (X)HTML
<div class="justifie">Mon texte à justifier</div>

Comment provoquer le saut de page au bout d'un certain nombre de lignes ?
auteur : Jérôme
Il est possible d'utiliser les propriétés page-break-after et page-break-before.


Comment simuler le style CSS "position : fixed" sous Internet Explorer, sans utiliser de javascript ?
auteur : Iubito
Pour le faire, on utilisera le code suivante :
CSS nécessaire
.fixe { 
  /* un bloc fixe situé en haut qui fait toute la largeur */ 
  position : fixed; 
  top: 0px; 
  left: 0px; 
  right: 0px; 
  width: 100%; 
  /* et le patch pour IE */ 
  position : expression("absolute"); 
  width : expression("100%"); 
  top : expression(document.body.scrollTop + this.offsetHeight - this.offsetHeight); 
  left : expression("0px"); 
}
Exemple d'appel du CSS dans la page (X)HTML :
<div class="fixe">Bloc fixe !</div>
Note : Ce code fonctionne aussi très bien avec Opera/Mozilla avec la propriété position : fixed, mis au début.


Pourquoi les propriétés text-align ne fonctionnent pas sur les éléments de type SPAN ?
auteur : Jérôme
L'élement span est une balise "inline" qui sert à délimiter un élément de façon logique. Pour que la balise se comporte tel un "bloc", il faut lui appliquer la propriété display avec la valeur block.

Définition du style CSS :
Code CSS
.bloc { 
  display : block; 
}
Et son utilisation dans la page (X)HTML :
<span style="bloc">Mon texte</span>


Consultez les autres F.A.Q's


Valid XHTML 1.0 TransitionalValid CSS!

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2004 Developpez.com Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.