18041 sujets

Questions générales et questions de débutants

Alignement vertical : solution efficace avec une DTD transitionnelle

Bonjour à tous,

Dans cette article vous illustrez très bien comment centrer verticalement des éléments avec les propriétés display:inline-block et vertical-align:middle :

http://www.alsacreations.com/tuto/lire/1032-comment-centrer-verticalement-sur-tous-les-navigateurs.html

J'ai testé cette solution sans jamais réussir à faire un alignement vertical. La raison, j'utilisais une DTD transitionnelle et non strict comme dans votre exemple.

Ma question est-on capable actuellement de faire de l'alignement vertical sur tout les navigateurs mais avec une DTD transitionnelle. La plupart des sites sont encore obligés (malheureusement) d'utiliser du transitionnel.

Je suis conquit par l'idée d'utiliser du display:inline-block pour positionner 2 blocs côte à côte (exit le floatttant). Mais si on pouvait en plus faire de l'alignement vertical dedans, de manière propre, se serait le top non ??

Merci d'avance pour vos idées
pablolito a écrit :
J'ai testé cette solution sans jamais réussir à faire un alignement vertical. La raison, j'utilisais une DTD transitionnelle et non strict comme dans votre exemple.

Ça ne devrait pas changer quoi que ce soit.
Sauf s'il s'agit d'un Doctype tronqué (sans URL de la DTD), dans ce cas: ne pas utiliser ce type de Doctype, jamais de la vie!

Le code HTML est valide?

pablolito a écrit :
Je suis conquit par l'idée d'utiliser du display:inline-block pour positionner 2 blocs côte à côte (exit le floatttant). Mais si on pouvait en plus faire de l'alignement vertical dedans, de manière propre, se serait le top non ??

Tu peux aligner verticalement des éléments en display:inline-block, en utilisant vertical-align. Comme tu le ferais avec des images par exemple.
Salut Florent,

Je viens de tester le code est valide.

Alignement non valide en transitionnel :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<style type="text/css">
*{margin:0;padding:0}
img{border:0}

p { background:#ccc;width:200px;height:200px;line-height:200px;text-align:center; /* centrage horizontal d'un élément en-ligne */ }
img { vertical-align:middle; }

</style>
</head>
<body>
<p>
	<img src="images/img_test.jpg" width="150" height="100" alt="" title="" />
</p>
</body>
</html>


Alignement valide en strict :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<style type="text/css">
*{margin:0;padding:0}
img{border:0}

p { background:#ccc;width:200px;height:200px;line-height:200px;text-align:center; /* centrage horizontal d'un élément en-ligne */ }
img { vertical-align:middle; }

</style>
</head>
<body>
<p>
	<img src="images/img_test.jpg" width="150" height="100" alt="" title="" />
</p>
</body>
</html>
Autant pour moi, au moins dans Gecko un Doctype Transitional déclenche le Almost Standards Mode, qui a très peu de différences avec le mode standard mais ça joue ici.

Solutions:
- Doctype Strict (HTML4, XHTML1);
- Doctype HTML5.
Salut,

Tu n'es pas le premier à avoir rencontrer ce problème. J'ai prévenu Raphaël la semaine dernière en lui demandant d'ajouter une petite note dans le tutoriel, ce qu'il a fait le jour de la création de ton sujet.

a écrit :
Certaines solutions exposées dans ce tuto ne fonctionnent pas avec un doctype Transitionnel. En effet, ce dernier déclenche le mode "presque standard" qui provoque des comportements bizarres avec les images. Si possible, utilisez donc une DTD Strict.

Désolé pour le temps que tu as dû perdre à chercher le bug, d'autant plus que cela fait plusieurs mois que j'avais connaissance de l'embrouille (c'est de ta faute, fallait venir poster avant ! Smiley cligne ).
Sujet clos
Aller à