{"id":276,"date":"2009-04-26T16:51:42","date_gmt":"2009-04-26T14:51:42","guid":{"rendered":"http:\/\/www.gatellier.be\/blog\/?p=276"},"modified":"2009-04-27T11:22:58","modified_gmt":"2009-04-27T09:22:58","slug":"ie-vertical-align-middle","status":"publish","type":"post","link":"https:\/\/gatellier.be\/blog\/ie-vertical-align-middle\/","title":{"rendered":"CSS: vertical-align:middle pour Internet Explorer 6 et 7"},"content":{"rendered":"

Depuis la fin des mises en pages en tableaux html, centrage vertical d’un \u00e9l\u00e9ment dans son conteneur a toujours pos\u00e9 des probl\u00e8mes.<\/p>\n

Internet Explorer et le vertical-align<\/h3>\n

En cause, Internet Explorer dans les versions 6 et 7 (je ne parle m\u00eame pas des versions ant\u00e9c\u00e9dantes) ne supportent pas correctement la propri\u00e9t\u00e9 CSS<\/acronym> display:table-cell<\/code><\/a><\/strong>.<\/p>\n

En effet, le seul moyen correct de centrer verticalement un \u00e9l\u00e9ment est de faire en sorte que l’\u00e9l\u00e9ment parent se comporte comme une cellule de tableau<\/a> (d’o\u00f9 des r\u00e9actions folkloriques<\/a>). <\/p>\n

Le display:table-cell<\/code> a \u00e9t\u00e9 introduit dans Internet Explorer 8<\/a>. Avant \u00e7a, toutes les solutions avaient leurs revers : line-height<\/code><\/strong> qui ne permet pas d’avoir des espacements de lignes correct, hauteur des \u00e9l\u00e9ments imp\u00e9rativement fixe, hacks CSS<\/strong> myst\u00e9rieux (dont on ne conna\u00eetra pas le comportement dans les futurs navigateurs).<\/p>\n

Bref, rien qui ne me satisfait pleinement.<\/p>\n

CSS vertical-align:middle;<\/h3>\n

Dans Firefox 2 (pc), Firefox 3 (pc\/mac), Chrome 1.0.154, Safari (4 pc, 3.2.1 mac), Opera 9.64 (pc\/mac), Camino, Shira, IE8, le code suivant est bien rendu.<\/p>\n

\"texte<\/a><\/p>\n

Le code HTML<\/acronym><\/h4>\n
\r\n<div class="v">\r\n\t<div>Ce texte devrait \u00eatre centr\u00e9 verticalement<\/div>\r\n<\/div>\r\n<\/pre>\n
Le code CSS<\/acronym><\/h4>\n
\r\n<style type="text\/css">\r\n.v {\r\n\tdisplay:table-cell;\r\n\tvertical-align:middle;\r\n\t\/*les 3 lignes suivantes ne sont pas n\u00e9cessaires*\/\r\n\tbackground:#900;\r\n\theight:250px;\r\n\twidth:150px;\r\n}\r\n.v div {\r\n\t\/*non n\u00e9cessaire, juste de la d\u00e9coration pour mieux visualiser*\/\r\n\tbackground:#090;\r\n}\r\n<\/style>\r\n<\/pre>\n
Par contre dans IE 6 et 7, l’alignement vertical n’est pas pris en compte et la bo\u00eete de texte reste en haut de la bo\u00eete bleue.<\/p>\n
\"texte<\/a><\/p>\n
Expressions CSS \u00e0 la rescousse<\/h3>\n
Encore une fois<\/a>, les expressions CSS d’Internet Explorer<\/strong> – qui, je sais, ne sont pas recommand\u00e9es pour des raisons de performances et qui ont \u00e9t\u00e9 supprim\u00e9es d’IE8 – peuvent nous \u00eatre bien utiles.<\/p>\n
Code<\/h4>\n
\r\n<!--[if lt IE 8]>\r\n<style type="text\/css">\r\n.v {\r\n\tposition:relative;\r\n\twidth:expression(this.childNodes[0].offsetWidth+"px");\r\n}\r\n.v div {\r\n\tposition:absolute;\r\n\ttop:50%;\r\n\tmargin-top:expression(-this.offsetHeight\/2);\r\n}\r\n<\/style>\r\n<![endif]-->\r\n<\/pre>\n
Le contenu sera positionn\u00e9 en absolu, \u00e0 cinquante pourcent du top, par rapport \u00e0 son conteneur. Il aura aussi une marge n\u00e9gative de la moiti\u00e9 de sa hauteur<\/strong>.<\/p>\n
Comme, le contenu est plac\u00e9 en absolu, il sort du flux de la page. Sa largeur est donc report\u00e9e sur le conteneur.<\/p>\n
Remarques et limitations :<\/h3>\n