Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2028 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Centrer une image par rapport à un texte

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Centrer une image par rapport à un texte

n°2194711
oceanecoin
Posté le 18-06-2013 à 14:58:06  profilanswer
 

Bonjour,  
J'ai tenté de mettre un vertical-align:middle; à mon image mais ça ne change rien.  
Voici le lien (ça pourra peut être plus vous aider)  
http://vaurel.free.fr/cheese/updates.html  
En fait, c'est en bas avec l'image à gauche que je voudrais qu'elle soit au milieu du texte (image étoile)  
Quelqu'un pourrait il m'aider?  
 
En attendant, je continue de chercher ;)
 
Merci

mood
Publicité
Posté le 18-06-2013 à 14:58:06  profilanswer
 

n°2194719
Riokmij
Blink and you're dead
Posté le 18-06-2013 à 15:09:17  profilanswer
 

N'utilise pas le tag img pour ça, mets plutôt ton image comme fond de ton dernier paragraphe, et tu peux ensuite la centrer facilement. Supprime ton <section> avec l'image de l'étoile et essaie le css suivant, ça devrait faire ce que tu veux :

 
Code :
  1. .texte_etoile {
  2. font-family: "maide";
  3. font-size: 18px;
  4. color: #3f5c05;
  5. padding-left: 20px;
  6. background-image: url(images/etoile.jpg);
  7. background-repeat: no-repeat;
  8. background-position: left;
  9. }
 

PS : sinon, ton html est bizarre. Je ne suis pas sûr que tu ais bien compris le sens de l'élément <section>


Message édité par Riokmij le 18-06-2013 à 15:10:24

---------------
Are you two fucking? Are you serious? Right in front of my salad?!
n°2194722
oceanecoin
Posté le 18-06-2013 à 15:14:34  profilanswer
 

oui mais j'aurai bien aimé savoir comment faire sans un background-image
et il a quoi mon section?

n°2194733
Riokmij
Blink and you're dead
Posté le 18-06-2013 à 15:36:52  profilanswer
 

oceanecoin a écrit :

oui mais j'aurai bien aimé savoir comment faire sans un background-image


 
Sauf si tu as une excellente raison de ne pas vouloir utiliser de background-image, je te déconseille de faire autrement.
 
La seule solution que je vois pour faire avec une <img>, c'est de faire une table. Soit explicitement avec le tag <table> (pas terrible du point de vue sémantique), soit avec une construction du genre (qui va poser des problèmes avec IE < 8) :

Code :
  1. <div class="table">
  2.   <div class="etoile"><img src="etoile.jpg"></div><div>blablabla</div>
  3. </div>


 
avec le CSS suivant :  

Code :
  1. .table {
  2.   display: table;
  3.   width: 100%;
  4. }
  5. .table>div {
  6.   display: table-cell;
  7. }
  8. .table .etoile {
  9.   vertical-align: middle;
  10.   width: 20px;
  11. }


 
C'est plus compliqué, moins propre et moins portable.
 

Citation :


et il a quoi mon section?


 
Tu utilises des <section> pour tout et n'importe quoi (genre pour des titres ou des paragraphes ou ton étoile)


---------------
Are you two fucking? Are you serious? Right in front of my salad?!

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Centrer une image par rapport à un texte

 

Sujets relatifs
Conflit au niveau des CSS ? Image qui ne s'affiche pasjs apparition texte au passage de la souris
Programmation python, fouille de texteProblème changement d'image lors d'un onclick
suppression de colonne dans un texteEffet filter sur une image
FICHIER TEXTE en JAVA un texte aléatoire dans un fenetre Popup
Changer ligne d'un fichier texteVB concatenation de texte
Plus de sujets relatifs à : Centrer une image par rapport à un texte


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR