Problème de titre lors de la rotation de l'image

J'ai un problème avec les balises de titre lorsque je les fais flotter autour d'une image en mode de compatibilité dans l'explorateur.Problème de titre lors de la rotation de l'image

<img src="1.gif" style="float: left; margin-right: 10px"><h1>Some headline</h1>

L'image est comme 100px élevé, et par défaut, les centres de texte en milieu, qu'il devrait, mais avec le mode compability sur elle aligne le dessus.

Comment puis-je corriger pour aligner verticalement le centre?

/Molgan

Source

2010-10-25 Lasse Edsvik

Aligner verticalement à quoi? Pour l'image flottante? Il n'est pas vraiment possible d'aligner quelque chose verticalement sur un flotteur. Vous oubliez probablement certains CSS pertinents. Le meilleur serait un exemple de travail. – RoToRa

Y at-il un besoin spécifique de faire flotter l'étiquette H1 à côté de l'image? Une autre solution consisterait à affecter l'image en arrière-plan à la balise H1, puis à utiliser la position de fond et le remplissage css pour positionner correctement votre texte et votre image. Pouvez-vous fournir votre balisage html ou un lien vers la page?

h1 { background: url(/path/to/my_image) 10px 15px no-repeat; padding: 20px; }

Cela placerait votre image comme arrière-plan du H1, et le positionner 10px de la gauche et 15px du haut, par exemple.

Source

2010-10-25 13:42:50

+1 pour la suggestion d'image d'arrière-plan – Brad

@Stephen Moran Ceci est une bonne solution, mais vous êtes limité à une certaine taille de l'image. –

@Justus, vous n'êtes pas limité à une ** taille ** particulière de l'image, vous ne pouvez pas *** l'échelle *** avec cette méthode. Vous êtes limité à la résolution native de l'image. – Brad

-1

Ce n'est pas "CSS pur", mais il est "IE-preuve"!

<table> 
    <tr> 
    <td style="margin-right: 10px"> 
     <img src="1.gif"> 
    </td> 
    <td valign="middle"> 
     <h1>Some headline</h1> 
    </td> 
    </tr> 
</table>

Source

2010-10-25 13:39:01 Brad

Oh regarde, quelqu'un n'aime pas les «tableaux» et pense qu'ils méritent un vote automatique. Eh bien, je pense que ** IE ** mérite quelques votes négatifs. – Brad

Pourquoi faire flotter l'image? Épargnez-vous un peu de temps et placez l'image dans l'étiquette de titre, puis vous pouvez utiliser l'alignement vertical pour la positionner.

JsFiddle solution

Works cross-browser pour autant que je peux vérifier.

Source

2010-10-25 14:06:09

Problème de titre lors de la rotation de l'image

Répondre

Questions connexes