[Résolu] Centrage vertical d'une image dans un li sous WebKit et Geck

Bonjour,

Je sèche actuellement sur un problème d'alignement d'image dans un li, comme cité dans le titre. Je n'ai aucun soucis pour l'effectuer sur du texte et cela fonctionne correctement sous Opera et IE9.

Voici un extrait de code html :

<div id="menu_horaires">
 <ul class="uiroot automne">
  <li class="submenu liroot">
   <img src="../images/close.gif" alt="Groupes" />&nbsp;Groupes
   <ul>
    <li class="submenu">Sous-menu
     <ul>
      <li class="submenu">...</li>
     </ul>
    </li>
   </ul>
  </li>
 </ul>
</div>

Et le CSS correspondant :

#menu_horaires {
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left:auto;
    margin-right:auto;
    border:1px solid #000;
    font-size: 9pt;
    font-weight: bold;
    cursor:default;
    display:table;
}
#menu_horaires img {
    vertical-align:middle;
}
#menu_horaires ul {
    padding: 0;
    margin:0;
    list-style:none;
}
#menu_horaires ul li > ul {
    position:absolute;
    display:none;
    border:1px solid #000;
}
#menu_horaires ul li ul li > ul {
    margin-top:-21px;
    left:118px;
}
#menu_horaires ul li.liroot {
    min-width:120px;
    line-height:20px;
    display:table-cell;
}
#menu_horaires ul li ul > li {
    min-width:110px;
    text-align:left;
    padding-left:3px;
    padding-right:5px;
    white-space: nowrap;
}

Cela fait plusieurs jours que je parcours votre forum (et effectue des google research) sans trouver de solution à mon problème. Je pense qu'il s'agit certainement d'une erreur de conception de ma part que je n'arrive pas à détecter.

Voici une capture d'écran illustrant de manière plus précise mon problème d'alignement vertical :



Par avance merci pour votre aide !
Modifié par aperusset (21 Oct 2011 - 10:46)

Bonsoir,

Je ne comprend pas trop ce que viennent faire les déclarations display: table; et display: table-cell; dans votre code, néanmoins grâce à cette dernière on peut recourir à la propriété vertical-align de manière efficace pour palier ce problème. Il suffit de changer le bloc de déclaration des <li> de classe "liroot" comme suit :

#menu_horaires ul li.liroot {
	min-width: 120px;
	[b]height: 20px;[/b] /* et plus line-height */
	display: table-cell;
	[b]vertical-align: middle;[/b]
}

Et de supprimer cette règle qui devient inutile :

#menu_horaires img {
	vertical-align: middle;
}

En faite j'ai moi-même souvent été confronté à ce problème avec vertical-align qui ne centre pas toujours convenablement les éléments en-ligne entre eux, ou du moins pas comme on le voudrait.

Ici puisque vous employez déjà des règles qui changent le mode d'affichage en tableau (display: table; et display: table-cell;), autant en profiter car il est alors possible d'utiliser vertical-align: middle; sur ces derniers pour que tout leur contenu soit centré verticalement.
Modifié par jeremy-p (19 Oct 2011 - 18:56)

Modifié par aperusset (20 Oct 2011 - 13:05)

Bonjour,

J'ai appliqué votre solution, mais je n'obtient pas le résultat escompté :



Comme vous pouvez le constater, le texte se retrouve pousser vers le bas, et l'image n'est pas tout à fait centrée.

Le résultat est exactement le même sous Chrome, FF, IE9, Safari et Opéra.

Serait-il envisageable de wrapper le contenu du li avec un div, et d'effectuer les différents centrages sur ce dernier ?

Par avance, merci.
Modifié par aperusset (20 Oct 2011 - 13:07)

Bonjour,

On pourrait voir ce code sous la forme d'une page en ligne (page d'origine ou page de test reproduisant le problème)? Ce serait plus simple à débuguer à l'aide d'outils tels que Firebug, Web Inspector, etc.

J'ai exporter le code de mon menu (accessible seulement par login en temps normal) et l'ai placé à cette url :

http://www.svrv.ch/vertical-align-not-delete-alex/

Je vous laisse regarder et éventuellement commenter !

Par avance, merci !

EDIT : cette page de test ne fonctionne pas sous IE, l'attribut display:table-cell n'étant apparemment pas pris en compte.
Modifié par aperusset (20 Oct 2011 - 15:57)

Première correction essentielle à faire: ajouter un Doctype au début du code HTML. On peut faire quelques recherches sur ce qu'est un Doctype, il y a plein de documentation en ligne à ce sujet. Si on veut aller au plus vite, juste ajouter la ligne suivante au début du code HTML (avant <html>):

<!DOCTYPE html>

aperusset a écrit :
ne fonctionne pas sous IE, l'attribut display:table-cell n'étant apparemment pas pris en compte

display:table-cell (qui est une déclaration CSS, composée d'une propriété et d'une valeur, et non pas un «attribut») est compris par Internet Explorer à partir de la version 8.
À noter toutefois que sans Doctype, IE8 et IE9 vont afficher la page plus ou moins comme le ferait IE5.5, donc il est probable que dans ce cas le display:table-cell soit ignoré. D'où l'absolue nécessité de toujours utiliser un Doctype en bonne et due forme.

Sinon, j'obtiens un centrage vertical de l'image plutôt correct. Le résultat n'est peut-être pas tout à fait idéal, mais le vertical-align:middle est bien pris en compte. Si on veut un résultat peut-être un peu plus esthétique, il me semble qu'un vertical-align:-3px (qui place le bas de l'image trois pixels en dessous de la ligne de base du texte) a un rendu plutôt correct.

Une remarque en passant: le texte alternatif de l'image ne devrait pas être "Groupes", qui ne correspond a priori pas à la fonction de l'image, mais plutôt "Fermer" (à voir en fonction du rôle exact de cette image, qui me semble peu clair ici).
Modifié par fvsch (20 Oct 2011 - 18:41)

Bonjour et tout d'abord merci pour votre réponse !

a écrit :
ajouter un Doctype au début du code HTML

Mea culpa, j'ai simplement oublié de le transférer de ma page de base à l'extraction de code, où il est bien présent.

a écrit :
le texte alternatif de l'image ne devrait pas être "Groupes"

Il s'agit dans ce cas d'une image "test" prise au hasard, le texte alternatif ne serait autrement pas vraiment adapté dans ce cas, effectivement.

a écrit :
Si on veut un résultat peut-être un peu plus esthétique, il me semble qu'un vertical-align:-3px a un rendu plutôt correct

En effet, j'obtiens un résultat tout à fait correct (encore mieux en fixant la hauteur de l'image à 14px). J'ai de mon côté effectué quelques essais, et arrive au même résultat avec le CSS suivant :

#menu_horaires img  {
      position: relative;
      height: 14px;
      top: 3px;
      bottom: 3px;
}

Ma question est donc la suivante : si je veux que la solution utilisée soit la plus propre et standard possible, vers laquelle me tourner ?

Par avance, merci.

Les deux solutions marchent bien et sont standard. J'utiliserais vertical-align plutôt que le positionnement relatif, mais c'est une préférence personnelle.

Merci bien !
Le problème est donc résolu !