faire une liste de texte centré aligné à côté de l'image avec CSS

Question

Je voudrais faire une liste (non numérotée ou à puces) d'éléments, où chaque élément a du texte qui est adjacent à une image. Il est important que le texte soit aligné verticalement par rapport au centre de l'image et qu'il y ait suffisamment de rembourrage haut et bas pour que chaque paire de texte et d'image ne se chevauche pas verticalement. J'ai essayé d'utiliser quelque chose comme ceci:

img.floatRight { float: right; margin-bottom: 2px; border: 0px; vertical-align: text-middle} 
.myitem { font-size: 12pt; margin-bottom: 50px; margin-top: 130px; vertical-align: middle} 

dans le corps de la page HTML:

<!-- item 1 --> 
<img src="item1.jpg" class="floatRight"><p class="myitem">Description of item 1</p> 
<!-- item 2 --> 
<img src="item2.jpg" class="floatRight"><p class="myitem">Description of item 2</p> 

le problème est que les éléments se chevauchent - de sorte que les images ne sont pas alignées verticalement qui l'autre, qui i » d les aimer. la marge supérieure et la marge inférieure ne semblent pas ajouter le bon niveau de remplissage pour y parvenir. De même, le paramètre vertical-align ne semble pas aligner verticalement le texte au centre de l'image.

enfin, je ne sais pas si je devrais utiliser p class = « » ou div class = « » ici ... encore une fois, il est important de ne pas avoir chevauchement entre

toutes les idées de chacun des éléments sur la façon dont réparer ça? Merci beaucoup.

Answer 1

L'alignement vertical de choses sans utiliser de tables est une douleur dans la crosse! Tu ferais mieux d'utiliser une table pour ça. Vos images utilisent-elles toutes la même largeur? Sinon, vous pouvez supprimer la largeur fixe dans td.item_photo {} et td.item_photo img {}. De plus, vous pouvez changer la largeur de table.items d'auto à 100% ou un montant px (par exemple: 400px) si vous le souhaitez.

J'espère que cela va aider à résoudre votre problème.

table{margin:0;padding:0;border-collapse:collapse} 

table.items{width:auto} 
td.item_photo{vertical-align:middle;text-align:left;width:200px;padding:0 0 15px 15px} 
td.item_text{vertical-align:middle;text-align:left;padding:0 0 15px 0;font-size:12px;line-height:16px} 
td.item_photo img{display:block;width:200px} 

<table class="items"> 
    <tr> 
     <td class="item_text">Item 1 Description</td> 
     <td class="item_photo"><img src="/images/item1.jpg" /></td> 
    </tr> 
    <tr> 
     <td class="item_text">Item 2 Description</td> 
     <td class="item_photo"><img src="/images/item2.jpg" /></td> 
    </tr> 
</table> 

Answer 2

Je voudrais commencer par mettre les images à l'intérieur du bloc p.myitem et en lui donnant un:

p.myitem { 
    overflow: hidden; 
} 

Cela devrait prendre soin du chevauchement. À propos de l'alignement vertical des images et du texte, cela peut être difficile en utilisant css. Si la solution d'alignement vertical ne fonctionne pas et que vous connaissez la hauteur des images et qu'il ne s'agit que d'une ligne de texte, la solution la plus simple consiste à donner au paragraphe une hauteur de ligne égale aux images.