Positionnement de texte et d'image avec css

J'ai un problème avec le positionnement d'un texte avec une image en utilisant CSS. Cela fonctionne bien dans Firefox et IE mais pas dans Safari. L'image est placée à gauche du texte et je veux que le texte soit au centre de l'image en position verticale. J'utilise une police personnalisée (MyriadProLight), en utilisant font-face.Positionnement de texte et d'image avec css

Voici à quoi il ressemble dans Safari: http://oi52.tinypic.com/2eg5p8x.jpg

Voilà comment je veux (et comment il regarde dans Firefox et IE): http://oi54.tinypic.com/1zg3xhx.jpg

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 

    <head> 
     <title>Title</title> 
     <style> 

      @font-face { 
      font-family: 'MyriadProLight'; 
      src: url('myriadpro-light-webfont.eot'); 
      src: local('☺'), url('myriadpro-light-webfont.woff') format('woff'), url('myriadpro-light-webfont.ttf') format('truetype'), url('myriadpro-light-webfont.svg#webfontpR0gSEvM') format('svg'); 
      font-weight: normal; 
      font-style: normal; 
      } 

      h1 
      { 
       font-size: 20pt; 
       font-family: "MyriadProLight", "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif; 
       color: #333; 
       text-transform:uppercase; 
       line-height: 21pt; 
       font-weight: normal; 
       letter-spacing: 0px; 
       margin: 0px 0px 10px 0px; 
       padding: 0px; 
      } 

      .iconimage 
      { 
       margin-right: 7px; 
       vertical-align: middle; 
      } 

     </style> 
    </head> 
    <body> 
     <h1><img class="iconimage" src="image.png" />This is the header</h1> 
    </body> 
</html>

Source

2010-10-06 Martin

Le code de page entier joue un rôle ici. Pouvez-vous poster tout le HTML? – KatieK

@KatieK - Mise à jour de la question, mais c'est vraiment simple html comme je l'ai testé beaucoup. Merci! – Martin

Positionner des images en ligne avec du texte est une entreprise compliquée. Je voudrais déplacer l'image en dehors de votre balise h1 et la laisser flotter à gauche, puis modifier le placement avec des marges. Quelque chose comme ceci:

<img class="iconimage" src="mail.png" style="float:left; margin:10px" /> 
<h1>This is the header</h1>

Source

2010-10-06 18:07:38

Ok, j'ai pensé à cette solution mais je voulais l'avoir à l'intérieur si c'était possible .. – Martin

Peut-être qu'il serait préférable de supprimer la balise img et de le faire en CSS seul:

h1 { 
    padding: 0 0 0 30px; 
    background: url(image.png) no-repeat left; 
}

Source

2010-10-06 19:23:51

Je ne sais pas ce qui ajoute quoi que ce soit, mais si vous affichez votre page dans Firefox et utilisez ensuite firebug pour rechercher l'élément, vous remarquerez peut-être que les fontes Web @ font-face ne sont pas alignées verticalement au centre de leurs hauteurs de ligne. Je ne connais pas assez les polices pour savoir s'il s'agit d'un problème de polices de caractères, mais j'ai fait toute ma génération avec font-squirrel, que les gens semblent considérer comme l'option la plus fiable.

solutions de contournement

Ma police ('Destroy') a été aligné très fortement vers le bas. Donc, si je n'incluais pas assez d'espace pour cela, il semblait coupé au fond. Deux solutions travaillées:

Si votre élément est incassable: Faites en sorte que la hauteur de ligne double la taille de la police. Si votre élément se casse: ajoutez un remplissage au bas de l'élément égal ou légèrement inférieur à la taille de la police.

De toute évidence (ou peut-être pas, désolé), j'ai affaire à des en-têtes et autres. Je n'ai aucune idée si ceux-ci travailleraient avec des paragraphes ou d'autres éléments multi-lignés.

Source

2011-02-09 04:54:00 Chris

Salut Chris, bienvenue à SO! S'il vous plaît gardez à l'esprit que les réponses ne sont pas des messages et nous essayons donc de ne pas inclure les salutations, les slogans ou les signatures. Aussi, je vous suggère de lire le [faq]. – Roflo

Positionnement de texte et d'image avec css

Répondre

Questions connexes