28172 sujets

CSS et mise en forme, CSS3

Aligner verticalement image et texte dans une liste

Salut à toutes et tous !

Bon, mon problème est simple, mais je bute sur sa résolution depuis des heures
J'ai une liste tout ce qu'il y a de plus ordinaire, où chaque élément <li> contient du texte. Certains éléments <li> contiennent en plus une image.
Je souhaite que cette image et le texte (qui fait plusieurs lignes) soient alignés verticalement — au milieu de l'image, en l'occurrence.

Quand je mets mon image en vertical-align:middle; tout est presque OK sauf que mon texte fait plusieurs lignes : la 1ère ligne est bien aligné au milieu, mais les autres lignes sont au-dessous de l'image Smiley ohwell

Quand j'ajoute à l'image un float:left; toutes les lignes du texte sont bien alignées à gauche de l'image, mais elles sont alors en haut de l'image, pas au milieu Smiley fache

Une idée ?…

Merci !
Mouais… Je suis sidéré qu'il n'y ait pas de solution pour un problème si ordinaire Smiley decu

Le coup du tableau… c'est ce que tu avais choisi a priori… Mais il y a longtemps que j'ai abandonné les tableaux. Ça m'ennuie d'y revenir. Merci quand même Smiley cligne
Alors je suis effectivement parti sur l'option de l'image en background, puis jouer avec les padding pour placer le texte. Ça marche assez bien. Pas très orthodoxe…

Le sujet reste ouvert !!
supunna a écrit :
Mouais… Je suis sidéré qu'il n'y ait pas de solution pour un problème si ordinaire Smiley decu


Solutions:
- utiliser display: table-cell sur le li;
- ou bien utiliser display: inline-block sur le contenu du li.

Problème: "table-cell" n'est pas compris par IE 6-7; "inline-block" n'est pas compris par IE 6-7 et par Firefox 2.

Solution tenant compte de ces contraintes: utiliser un tableau.
Modérateur
Supunna a écrit :
Mouais… Je suis sidéré qu'il n'y ait pas de solution pour un problème si ordinaire decu

Le coup du tableau… c'est ce que tu avais choisi a priori… Mais il y a longtemps que j'ai abandonné les tableaux. Ça m'ennuie d'y revenir. Merci quand même cligne
Alors je suis effectivement parti sur l'option de l'image en background, puis jouer avec les padding pour placer le texte. Ça marche assez bien. Pas très orthodoxe…

Le sujet reste ouvert !!


Si ordinaire , heu , ce comportement est typique d'un tableau , surement en cela que c'est 'ordinaire' Smiley cligne .

Autrement , la piste du display:table-cell et display:inline-block (apprivoisé pour IE ), reste une solution alternative qui reste de toute façon bancale ou risquée si mal maitrisée ou incomprise .

ex:

<!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" xml:lang="fr" lang="fr">
    <head>
    <title>XHTML 1.0 Strict</title>
<style type="text/css">
#global {
    display:table; /* pas pour IE */
    width:800px;   /* pour IE en particulier */
    margin:auto;
    }

.table {
    display:table-row;
    }
li span
    {
    display:table-cell;
    vertical-align:middle;
    margin:0;
    padding:0;
    width:70%;
    }
 li span.img {
    width:29%;
	text-align:center;

    }
img {
    vertical-align:middle;
    }
/* test visuel , met en evidence les difference */
ul , span {border:1px solid;
	background:#ccc;}
	li {background:lightblue}
</style>
<!--[if IE]>
<style type="text/css">
 li span  {
    display:inline;
    zoom:1;

    }

</style>
<![endif]-->
</head>
<body>
<div >
	<ul id="global">
		<li  class="table">
<span class="img">	<img src="http://decoupe-fr.net/forums/img/avatars/98.jpg" alt="image" width="100" height="100"/></span>
<span>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</span></li>
		<li  class="table">
<span class="img">	<img src="http://decoupe-fr.net/forums/img/avatars/98.jpg" alt="image" width="100" height="100"/></span>
<span>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
</span></li>
	</ul>
</div>

</body>
</html>


ça reprend le principe evoqué ici : http://yidille.free.fr//plux/valign/?2-complement-vertical-align
Bien comprendre le comment du pourquoi et fixer une largeur au moins à l'un des 2 élements permet d'avoir un rendu alternatif dans IE (les deux si on veut les mêmes proportions dans les differents navigateurs)

EN fait ,... rien ne remplace un tableau Smiley cligne .

GC
Sujet clos
Aller à