[résolu] Absmiddle en XHTML

Bonjour,

je cherche le remplacant de l'attribut absmiddle en XHTML.

pour rappel, absmiddle appliqué sur une image (que sous IE) aligne le centre absolu du texte (milieu de la taille totale et non baseline) avec le centre de l'image.

(un middle aligne le bas du texte avec le centre de l'image)

ex: <img src="image.gif" alt="" align="absmiddle" />mon texte

j'ai cherché partout mais je n'ai rien trouvé de concret à part l'utilisation de tableau (caca!! beurk)

merci pour vos réponses !

Li0n
Modifié le 31 Dec 2004 - 12:45

Faudra sans doute regarder vers la propriété vertical-align.

Recommandation CSS2 du W3C a écrit :

Cette propriété agit sur le positionnement vertical à l'intérieur de la boîte de ligne des boîtes générées par un élément de type en-ligne. Les règles suivantes n'ont de sens que par rapport à un élément parent de type en-ligne, ou de type bloc si celui-ci génère des boîtes en-ligne anonymes ; elles sont inopérantes autrement.

Je déplace dans le salon CSS et mise en forme.

vertical-align ne propose aucune méthode qui correspond à l' "absmiddle"

cf mon 1er post sur le rendu de "middle" qui correspond à:

<img src="image.gif" style="vertical-align: middle;" alt="" />mon texte

Modifié le 30 Dec 2004 - 02:14

Tu as un croquis à proposer pour qu'on voit exactement ce que tu veux ?

Li0n a écrit :
vertical-align ne propose aucune méthode qui correspond a l' "absmiddle"

"absmiddle" a t-il jamais existé dans un langage standardisé? La recommendation ne le mentionne pas pour l'élément img.

ps: n'hésites pas si tu le souhaites à passer par le bar du forum au topic des présentations.
Modifié le 30 Dec 2004 - 02:24

Il me semble qu'ici la traduction soit discutable.

Traduction de la Recommandation CSS2 du W3C a écrit :

middle
- Aligne le milieu vertical de la boîte avec la ligne de base de la boîte de son parent, ce milieu étant augmenté de la moitié de la valeur de la propriété 'x-height' du parent ;

Texte original de la Recommandation CSS2 du W3C a écrit :

middle
- Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.

Peut-être que ceci est plus juste ?

Stephan qui traduit la Recommandation CSS2 du W3C a écrit :

middle
- Aligne le milieu vertical de la boîte avec la ligne de base de la boîte de son parent plus la moitié de la valeur de la propriété 'x-height' du parent ;

Néanmoins, ceci fonctionne à merveille.

<p class="axe-y"><img src="" width="" height="" alt="" />Texte</p>

p.axe-y { 
   line-height: 1em; 
}
p.axe-y img { 
   vertical-align: middle; 
}

j'ai testé ton bout de code et voila ce que j'obtient:

sous IE, impécable (bizarre )


sous firefox, ca ne s'aligne pas :


je vais tenter de reexpliquer avec une image:


ce que je souhaiterais faire, c'est que la ligne du milieu de l'image soit la meme que la ligne du milieu du texte, et cela, quel que soit la taille de la police

mon code:

<img src="fr.gif" alt="" />&nbsp;France

l'image du drapeau:


en tout cas, merci pour le temps que vous y avez passé dessus !

Euh, ça ne répondra pas trop à ta question de départ, mais dans ton cas particulier pourquoi ton image ne serait pas en background de ton paragraphe ? (auquel cas il faudrait jouer avec les propriétés de positionnement de background)

euh,

1) parceque c'est compliqué car j'ai pas mal d'images dans le meme cas

2) parceque l'affichage des drapeaux est dynamique (fonction du pays d'un joueur) (et que le CSS doit être statique non ?)

je sais pas si j'ai bien repondu aussi

Sur un sujet connexe (aux drapeaux) il y a ce topic sur le Hub:
http://www.webmaster-hub.com/index.php?showtopic=7021&hl=
Et ce lien sur la-grange.net:
http://www.la-grange.net/2002/09/03.html

ils utilisent du background avec un margin correspondant a la largeur de l'image alors que, dans mon cas, c'est plus judicieux de mettre l'image en dur (car générée avec du php dans un panel de 240 drapeaux)

Technique de sioux très sale mais qui marche : utilise la propriété line-height sur le texte. Tu feras descendre ton texte petit à petit jusqu'à ce qu'il soit aligné avec le centre de ton image.
J'avoue que c'est crade ... mais je vois pas autre chose

Bingo !

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr-ca" xml:lang="fr-ca" xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Test</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta http-equiv="content-style-type" content="text/css" />
  <style type="text/css" media="all">
* {padding: 0; margin: 0;}
h1, p { 
   margin: 0.5em; 
}
[#blue]p.flag { 
   line-height: 1em; 
}
p.flag img, span { 
   vertical-align: middle; 
}
p.flag span { 
   padding-left: 5px; 
}[/#]
  </style>
 </head>
 <body>
  <div id="content">
   <h1>Test</h1>
   [#blue]<p class="flag"><img src="drapeau.gif" width="20" height="14" alt="" /><span>Texte</span></p>[/#]
  </div>
 </body>
</html>

Modifié le 31 Dec 2004 - 03:26

Hum... Jouer sur la hauteur de ligne me semble hasardeux: tout dépend de la config côté utilisateur. En outre, cela échoue dans Opera (au moins pour moi).

Je proposerai, pour le même code HTML que Stephan :

* {padding: 0; margin: 0;}
h1, p { 
   margin: 0.5em; 
}
p.flag img, span { 
   vertical-align: middle;
   display: inline-block; 
}
p.flag span { 
   padding-left: 5px; 
}

L'alignement est correct chez moi dans Opera, IE et FireFox.

En effet, je n'avais pas testé sous Opera !

Merci pour ta contribution Laurent Denis !

Reste à savoir comment ça passe sous mac...

<edit>
Je n'ai pas trouvé inline-block dans la Recommandation CSS2 : La propriété display
Alors j'ai cherché et trouvé dans CSS3 module: The box model
=> 4. The 'display', 'display-model' and 'display-role' properties
</edit>

On va se mettre à CSS3 à notre insu !
Modifié le 31 Dec 2004 - 06:47

Ce n'est pas spécifiquement du CSS3, mais du CSS2.1 (Candidate Recomandation). Voir:
- http://www.w3.org/TR/CSS21/visuren.html#propdef-display
- http://blog-and-blues.org/weblog/2004/11/24/346-de-css2-a-css21-anticipation-raisonnable-1 (à propos du rôle de CSS2.1)

tested & approuved !

voila qui termine bien l'année 2004

merci beaucoup à tous les intervenants,

et bonne année !

Désolé de déterrer le topic mais j'ai un petit problème sous opéra avec cette méthode

le contenu du span est aligné en haut :?
http://gazette.hc.free.fr/aff.png
alors que sous FF et IE ca va

http://gazette.hc.free.fr/_test.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>titre</title>
	<style type="text/css">
* {padding: 0; margin: 0;}
h1, p {
	margin: 0.5em;
}
p.avatar img, span {
vertical-align: middle;
display: inline-block;
}


p.avatar span {
padding-left: 5px;
}
</style>
	
</head>
<body>
<div>
		<p class="avatar" >
			<img src="http://HeroesOfWarcraft.nainwak.org//barres/pm_100b.gif" alt="pm" />
			<a href="#" >[TAG]</a>
			<span ><a href="#" >perso</a></span>
			<a href="#" ><img src="http://HeroesOfWarcraft.nainwak.org//messagerie/images/message.gif" alt="envoyer un message" /></a>
		</p>
</div>
</body>
</html>

c'est moi qui ai merdé ou bien ?
Modifié par Chatissimus (14 Aug 2005 - 08:47)

Non, c'est moi qui avais oublié les bugs d'Opera sur l'alignement vertical dans les inline-block

Ces bugs étant corrigés dans la prochaine version officielle de Presto, le moteur de rendu d'Opera, le mieux est donc de laisser courir.

a bon alors , on va laisser courir