0 votes

Fung avatar

Comment obtenir l'effet align="center" en CSS, être conforme au XHTML et fonctionner sur la plupart des navigateurs ?

Demandé el 1 de Octobre, 2009
Quand la question a-t-elle été
1576 affichage
Nombre de visites la question a
3 Réponses
Nombre de réponses aux questions
Résolu
Situation réelle de la question

J'essaie de rendre certaines pages HTML plus conformes et je commence par des choses simples comme supprimer align="center" dans les tableaux, etc.

Cependant, je ne parviens pas à obtenir l'effet que je souhaite en utilisant le CSS. Les choses que j'ai essayées sont les suivantes

text-align:middle
vertical-align:middle

et les plus suggérés par les amis designers

margin-left:auto; margin-right:auto; width: 100px

Mais dans certaines mises en page ou certains navigateurs (en particulier IE6), aucune ne semble fonctionner. Existe-t-il un moyen fiable de faire cela en utilisant uniquement du CSS et de le faire fonctionner sur la plupart des navigateurs ?

EDIT : Je voulais dire text-align: center; . Je l'ai tapé à la hâte. La page a déjà un DOCTYPE mais je ne suis pas sûr qu'il soit approprié.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Demandé el 1 de Octobre, 2009 par Fung

Réponses

Trop de publicités?

7voto

cletus avatar
cletus Points 276888

C'est :

text-align: center;

pour le centrage horizontal mais :

vertical-align: middle;

pour le centrage vertical, mais le centrage vertical de cette façon ne fonctionnera pratiquement qu'avec les cellules de tableau. Pour obtenir un centrage vertical inter-navigateurs sans utiliser de tableaux, voir Centrage vertical en CSS (oui, ce n'est pas trivial).

Remarque : text-align: middle y vertical-align: center sont des valeurs incorrectes.

Pour centrer horizontalement un élément de bloc, l'astuce habituelle est la suivante :

<div id="outer">
  <div id="inner">Some test...</div>
</div>

avec :

#outer { width: 600px; }
#inner { width: 300px; margin: 0 auto; border: 1px solid black; }

Gardez à l'esprit que cela ne fonctionnera pas nécessairement avec certaines versions d'IE en mode "bizarreries". Il est conseillé de forcer IE à passer en mode (également euphémique) "conforme aux normes" en utilisant un DOCTYPE au début de votre document.

Répondu el 1 de Octobre, 2009 par cletus (276888 Points )

0voto

meder avatar
meder Points 81864

Les marges automatiques horizontales sur un élément bloc/tableau le centreront horizontalement en supposant qu'il soit positionné relativement/statiquement, qu'il ait une largeur explicite ou intrinsèque (exemple d'un tableau) et qu'il ne soit pas trop large. no flottent avec le document en mode standard, bien qu'il y ait des exceptions mineures.

Il serait peut-être préférable de fournir un exemple où l'élément n'est pas centré.

Répondu el 1 de Octobre, 2009 par meder (81864 Points )

0voto

Utilisateur non enregistré avatar
Utilisateur non enregistré Points 0 
display:block; margin:0px auto;

Cela permet de centrer un bloc à l'intérieur de son parent sans centrer son contenu.

Répondu el 10 de Octobre, 2009 par Utilisateur non enregistré (0 Points )

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

Yandex
X