Centrer une image par rapport à un texte

Centrer une image par rapport à un texte - HTML/CSS - Programmation

Marsh Posté le 18-06-2013 à 14:58:06    

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

Reply

Marsh Posté le 18-06-2013 à 14:58:06   

Reply

Marsh Posté le 18-06-2013 à 15:09:17    

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?!
Reply

Marsh Posté le 18-06-2013 à 15:14:34    

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

Reply

Marsh Posté le 18-06-2013 à 15:36:52    

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?!
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed