vertical-align = "middle" pour td ne fonctionne pas si nous utilisons <! Doctype ...>

J'essaie d'aligner un élément au milieu, mais j'ai rencontré ce problème. J'utilise cette balise:vertical-align = "middle" pour td ne fonctionne pas si nous utilisons <! Doctype ...>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <body> 
     <table style="width:100%; height: 100%" cellspacing="0" cellpadding="0"> 
       <tr> 
        <td vertical-align="middle"> 
         <div id="progressContainer" style="text-align:center;"> 
          Some string here              
         </div> 
        </td> 
       </tr>  
      </table> 
    </body> 
</html>

Si je retire ceci: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">, son milieu aligné correctement.

Ce comportement est reproductible dans FF et chrome.

Question:

que je fais quelque chose de mal ici? En mode Quirks (Quirks), les navigateurs font des erreurs délibérées.

Source

2010-04-13 Manohar

Ne pas utiliser ''. Voir http://phrogz.net/css/vertical-align/ – jp2code

Etant donné que la hauteur de l'élément body est auto (valeur par défaut), le height: 100% sur l'élément table devient auto.

(hauteurs en pourcentage sont convertis en auto si l'élément parent a height: auto)

Source

2010-04-13 06:20:05 Quentin

J'ai donné , n'a pas eu d'effet sur la sortie. – Manohar

... l'élément HTML a toujours 'height: auto' pour que le corps l'obtienne aussi! – Quentin

Mais je ne veux pas spécifier la hauteur dans les pixels harcodés qui pourraient introduire des bugs de l'interface utilisateur. Est-ce qu'il y a un autre moyen? – Manohar

L'attribut est valign="middle" ou style="vertical-align: middle". Il n'y a pas d'attribut vertical-align.

Voir 11.3.2 Horizontal and vertical alignment

Source

2010-04-13 06:29:59

J'ai essayé avec , mais cela ne semble pas avoir d'effet. – Manohar

Essayez d'ajouter des bordures à 'table' (et peut-être' td') pour voir que la table a réellement une hauteur. Utilisez-vous des devtools, par exemple? Pyromane? –

Voir la démo: http://nikc.kapsi.fi/dev/html/misc/table-valign-demo.html –

vertical-align = "middle" pour td ne fonctionne pas si nous utilisons <! Doctype ...>

Répondre

Questions connexes