Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

alignement d'une image dans un menu

3 réponses
Avatar
Une Bévue
je ne parviens pas à aligner correctement verticalement une image dans
un menu :
<http://cjoint.com/12nv/BKnsRfJY4dm_12-11-13--18-40-11--screenshot_.png>
là, l'image fait 18x18 pixels^2, je peux hanger bien sûr.

le code html :
<body>
<ul id='menu'>
<li><a href='#'>Categories</a>
<ul>
<li><a href=''>A - B</a>
...
</li>
<li><a href='#'>Signets</a>
<li><a href='#'>Recherche</a>
<ul>
<li>...</li>
</ul>
</li>
<li>&nbsp;<img class='middle'
src='/global_css/recettes_img/blank_18x18.png' alt='' />&nbsp;</li>
<li>&nbsp;<img onclick='toggle_notes();'
src='/global_css/recettes_img/notes_18x18.png' alt='' />&nbsp;</li>
</ul>


le code css :
#menu ul li img {
/*
vertical-align:text-top;
*/
vertical-align:baseline;
}

j'ai essayé aussi avec vertical-align:middle;
bien sûr je voudrais un alignement avec les autres li comme :
<li><a href='#'>Signets</a>

3 réponses

Avatar
Une Bévue
Le 13/11/2012 18:55, Une Bévue a écrit :
je ne parviens pas à aligner correctement verticalement une image dans
un menu :
<http://cjoint.com/12nv/BKnsRfJY4dm_12-11-13--18-40-11--screenshot_.png&gt;
là, l'image fait 18x18 pixels^2, je peux hanger bien sûr.

le code html :
<body>
<ul id='menu'>
<li><a href='#'>Categories</a>
<ul>
<li><a href=''>A - B</a>
...
</li>
<li><a href='#'>Signets</a>
<li><a href='#'>Recherche</a>
<ul>
<li>...</li>
</ul>
</li>
<li>&nbsp;<img class='middle'
src='/global_css/recettes_img/blank_18x18.png' alt='' />&nbsp;</li>
<li>&nbsp;<img onclick='toggle_notes();'
src='/global_css/recettes_img/notes_18x18.png' alt='' />&nbsp;</li>
</ul>


le code css :
#menu ul li img {
/*
vertical-align:text-top;
*/
vertical-align:baseline;
}

j'ai essayé aussi avec vertical-align:middle;
bien sûr je voudrais un alignement avec les autres li comme :
<li><a href='#'>Signets</a>






bon à la page :
<http://www.alsacreations.com/astuce/lire/4-alignement-vertical-image-texte.html&gt;
on donne :
vertical-align:-14px;
le 14 est obtenu après tâtonnements...
Avatar
SAM
Le 14/11/12 06:25, Une Bévue a écrit :

le code css :
#menu ul li img {
/*
vertical-align:text-top;
*/
vertical-align:baseline;
}

j'ai essayé aussi avec vertical-align:middle;





à mon idée ça va aligner verticalement (environ à mi-hauteur de l'image)
les autres inlines de part et d’autre

<p>blabla
<img src="1.jpg" alt="" style="vertical-align:middle">
re blabla</p>

bien sûr je voudrais un alignement avec les autres li comme :
<li><a href='#'>Signets</a>





comme tu as pris garde à ce que les LI soient en inline
avec un peu de chance
ça va peut-être le faire

De prime abord j'en douterais un peu : ce LI n'est pas celui contenant
l'image, il n'y a aucune raison pour qu'il s'aligne sur le texte
entourant l'image dans l'autre LI

bon à la page :
<http://www.alsacreations.com/astuce/lire/4-alignement-vertical-image-texte.html&gt;

on donne :
vertical-align:-14px;
le 14 est obtenu après tâtonnements...



Un coup de bol quoi ... du raccommodage de grande volée

Un autre bricolage constituerait à glisser une image (transparente) de
même style (align,height) dans chaque LI.
Un peu comme ce qui se faisait au siècle dernier lorsqu'on se servait de
tables pour la mise en forme, afin d'assurer largeurs de colonnes et
hauteurs de rangées.

--
Stéphane Moriaux avec/with iMac-intel
Avatar
Une Bévue
Le 18/11/12 00:44, SAM a écrit :
Un coup de bol quoi ... du raccommodage de grande volée



ouais, c'est ce que j'ai pensé aussi

Un autre bricolage constituerait à glisser une image (transparente) de
même style (align,height) dans chaque LI.
Un peu comme ce qui se faisait au siècle dernier lorsqu'on se servait de
tables pour la mise en forme, afin d'assurer largeurs de colonnes et
hauteurs de rangées.



oui, ou avoir une image qui prend toute la hauteur du li et jouer sur
des borders transparents pour l'aligner.

bon, je ne vais pas user le soleil là-dessus...