vertical-align=“middle” pour les td ne fonctionne pas si nous utilisons <!doctype ...>
Je suis en train de moyen d'aligner un élément, Mais j'ai travaillé sur ce problème. J'utilise cette balise:
<!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 supprimer ce: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
, son milieu alignés correctement.
Ce problème est reproductible dans FF et chrome.
Question:
Je fais quelque chose de mal ici?
- Ne pas utiliser
<td vertical-align="middle">
. Voir phrogz.net/css/vertical-align
Vous devez vous connecter pour publier un commentaire.
Quand en mode Quirks, les navigateurs font des erreurs délibérées.
Depuis la hauteur de la
body
élément estauto
(par défaut), laheight: 100%
sur letable
élément devientauto
.(Pourcentage hauteurs sont convertis à
auto
si l'élément parent aheight: auto
)height: auto
de sorte que le corps obtenir que trop!html { height: 100%; }
L'attribut est
valign="middle"
oustyle="vertical-align: middle"
. Il n'y a pas d'attributvertical-align
.Voir 11.3.2 l'alignement Horizontal et vertical
table
(et peut-être letd
) pour voir que la table a une hauteur. Êtes-vous en utilisant toutes les devtools, par exemple, Firebug?height: 100%
àhtml
,body
ettable
pour que cela fonctionne. Voir la source de mon exemple.