Comment obtenir l'effet align = "center" en CSS et être compatible XHTML et le faire fonctionner sur la plupart des navigateurs

Cependant, je n'arrive pas à obtenir l'effet que je veux en utilisant CSS. Trucs que j'ai essayé comprennent

text-align:middle 
vertical-align:middle

et le plus suggéré par des amis designer

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

Mais sous certaines dispositions ou certains navigateurs (en particulier IE6) ne semblent fonctionner. Existe-t-il un moyen fiable de le faire en utilisant purement CSS et le faire fonctionner sur la plupart des navigateurs? J'ai voulu dire text-align: center;. Tapé dans une course. La page a déjà un DOCTYPE mais je ne suis pas sûr que ce soit approprié.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Source

2009-10-01 Fung

pouvez-vous publier une URL en direct pour que nous puissions y jeter un coup d'œil, ou au moins le HTML et le CSS requis? – Colin

Il est:

text-align: center;

pour le centrage horizontal, mais:

vertical-align: middle;

pour le centrage vertical mais vertical de centrage cette façon à peu près uniquement avec des cellules de tableau. Pour obtenir un centrage vertical entre les navigateurs sans utiliser de tables, regardez Vertical Centering in CSS (oui c'est non trivial).

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

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

<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 de IE dans le mode "bizarreries" euphémiques. C'est une bonne pratique de forcer IE en mode «conforme aux normes» (également euphémiste) en utilisant un DOCTYPE en haut de votre document.

Source

2009-10-01 03:50:43 cletus

marges automatiques horizontal sur un élément de bloc/tableau se centrer horizontalement, il en supposant qu'il est positionné relativement/statiquement, a une largeur explicite ou intrinsèque (exemple étant une table) et pas flotter avec le document en mode standard, bien qu'il y ait des exceptions mineures.

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

Source

2009-10-01 03:45:02

display:block; margin:0px auto;

Ceci va centrer un bloc à l'intérieur de son parent sans centrer son contenu.

Source

2009-10-10 15:48:08

Comment obtenir l'effet align = "center" en CSS et être compatible XHTML et le faire fonctionner sur la plupart des navigateurs

Répondre

Questions connexes