28221 sujets

CSS et mise en forme, CSS3

Pos. Hor+Vert dans un block et centrage texte par rapport image

Salut,
J'ai lu les tutos et astuces de ce site a propos du positionnement (en particulier celui pour centrer des données dans une page), mais moi je ne veux pas centrer des données dans une page...
Je veux juste avoir dans un <A> (sous forme de "block" avec une taille), une image et un texte (un peu comme un bouton quoi)...
mais je veux que tout soit parfaitement centré :
- verticalement (facile, ok)
- horizontalement (dans le block A)
- horizontalement : le texte par rapport a l'image !

à l'utilisation, je veux avoir le html suivant :
<a..><img...>mon texte</a>


Bon, j'ai cherché longtemps, j'ai passé du temps.. voici une premiere approche simpliste :


a { display:block;     [#green]/* passage de inline vers block*/ [/#] 
  width:200px; 	height:50px;    [#green]/* les dimensions de mon bloc*/[/#] 
  border : 1px solid #99ccff;    [#green]/* mise en page */[/#] 
  background-color : #FFF8DC;
  vertical-align: middle;    [#green]/* voilà... ici ! */[/#] 
  text-align : center;
  }
a:hover { background-color : #FFEBCD; 	} [#green]/* pour faire joli */[/#] 
img {
	vertical-align: middle
  }

voilà je me suis dis, que l'image et le texte aurait la même ligne de "base" et qu'ils serait centré (middle) dessus... et bien non..
bon,apres quelques tests.. je suis arrivé a faire marcher mon truc ...sous IE, avec un drolle de bidouille...
j'ai juste ajouté ce style là :

span {vertical-align:middle;
	height:100% }

et je place un span vide a cet endroit :
<a...>[#blue]<span></span>[/#]<img...>mon texte</a>

et là, j'obtiens exactement ce que je veux ... sous IE Smiley decu
ma theorie a deux balles sur comment ca fonctionne : le span prends 100% de l'espace en hauteur (dans mon A) et place la ligne de "base" au milieu de cet espace(vertical-align), et donc le texte et l'image s'alligne sur la même ligne de base ! ouf ! c'est presque logique Smiley smile

Mais voilà, je veux faire les choses bien, et ca ne marche pas sous FireFox (v1.0) donc c'est sans doute que c'est pas genial comme solution... et même si c'etait correct, je veux une solution qui marche aussi sous FF.

Donc voilà, je suis a la recherche d'une solution PROPRE et si possible sans hack affreux....

celui qui réussit gagne.. toute mon estime Smiley smile

Si vous n'avez pas compris ce que je veux, faites simplement un copié collé de ce code et ouvrez-le avec IE6 pour voir le resultat que je veux.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head></head>
<body>
<style>
	a {
		display:block;
		width:200px;
		height:50px;
		border : 1px solid #99ccff;
		background-color : #FFF8DC;
		vertical-align: middle;
		text-align : center;
	}
	a:hover {
		background-color : #FFEBCD;
	}
	img {
		vertical-align: middle
	}
	span {vertical-align:middle;
		height:100% }
</style>


<a href="#"><span></span><img src="" width="30" height="30" border="0">test</a>

</body>
</html>


merci!!!
Modifié le 04 Dec 2004 - 01:10
Bonsoir et bienvenue à toi,
T'es tu présenté dans le bar du forum?, as-tu effectué une recherche pour voir si ton soucis ou un problème voisin s'est déjà présenté à l'un d'entre nous?
As-tu tenté ta chance avec la recherche?
Bonsoir, non je ne me suis pas encore présenté.. ca ne saurait tarder...
oui, j'ai effectué des recherches, j'ai lu plein de trucs... sur alsacreations (en fait j'y ai passé toute ma soirée là Smiley smile hum...2h du mat!)
bon, j'ai trouvé plein de trucs (centrage horizontal..) mais pas exactement ce que je veux.
Je ne veux pas seulement centrer un "truc" (horizontalement) dans un block, je veux aussi que pour ce "truc" (qui est un texte plus une image) , et bien l'image soit centrée par rapport au texte. et ca, non, je suis désolé, j'ai pas trouvé. (en plus je savais que j'allais me payer un "utilise la fonction rechercher" ..) peut être que je suis passé a coté ? ou peut être que j'ai pas compris une certaine reponse qui aurai pu m'aider...

J'espere que la maniere dont j'ai expliqué mon probleme est suffisement claire ? j'ai essayé de faire didactique... de ne pas surcharger en code, de commenter mon code.. et en couleur Smiley smile , enfin, faire en sorte que ca ne soit pas trop rebutant...

si vous pouvez m'aider, n'hesitez pas.
merci.
Bonsoir,

Il me semble que le problème du "vertical-align" a déjà été évoqué dans ce forum, à savoir qu'il ne s'applique qu'aux tableaux normalement. Sans avoir à aller jusqu'à mettre un tableau dans ton code Smiley biggrin , si tu déclares ton ancre en "display:table-cell" dans ta CSS ton code fonctionnera alors aussi sous Firefox.

Pour une solution "propre" sous IE, faut chercher encore. Smiley rolleyes
Nilpohc a écrit :
Bonsoir,

Il me semble que le problème du "vertical-align" a déjà été évoqué dans ce forum, à savoir qu'il ne s'applique qu'aux tableaux normalement. Sans avoir à aller jusqu'à mettre un tableau dans ton code Smiley biggrin , si tu déclares ton ancre en "display:table-cell" dans ta CSS ton code fonctionnera alors aussi sous Firefox.

en effet, j'ai bien vu ce table-cell mais j'avais pas compris comment l'utiliser (oui vous allez trouver celà un peu dingue, mais bon tous le monde n'est pas des gourou Smiley smile )
en tout cas, oui ca marche maintenant enfin sous FF,
un grand merci.
merci d'avoir pris le temps de me donner la solution.

Nilpohc a écrit :
Pour une solution "propre" sous IE, faut chercher encore. Smiley rolleyes

Ben là.. aussi dingue que celà puiss paraitre... sous IE avec l'astuce su SPAN que j'ai trouvé complement par hazard, et bien celà marche super bien.
du coups, je laisse le span (qui ne sert a rien sous FF) et qui fait comme il faut sous IE.
aller, je vous donne le code complet, ca peux aider un autre debutant :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head></head>
<body>
<style>
	a {
		display:table-cell;
		width:200px;
		height:50px;
		border : 1px solid #99ccff;
		background-color : #FFF8DC;
		vertical-align: middle;
		text-align : center;
	}
	a:hover {
		background-color : #FFEBCD;
	}
	img {line-height: 50px;
		vertical-align: middle
	}
	span {vertical-align:middle;
		height:100% }
</style>


<a href="#"><span></span><img src="" width="30" height="30" border="0">test</a>

</body>
</html>

ca marche !
merci, a+
J'arrive pas a editer mon post precedant...
hpfx a écrit :

en effet, j'ai bien vu ce table-cell mais j'avais pas compris comment l'utiliser

J'avais aussi cherché du coté de line-height: mais bon, j' n'y étais pas arrivé.
si qqun sais s'il s'agit d'un bug IE ?... merci
Je crois que table-cell n'est pas très reconnu par ie.

Pour l'édition de ton post il doit y avoir deux boutons en haut à droite du post que tu souhaites éditer. Le plus à droite est celui pour citer un message, celui à sa gauche est celui pour éditer.

Sinon essayes -sous toutes réserves- un height et line-height identique sur l'élement conteneur si il y en a un? Il faudrait que ton "a" soit dans un élément de type block pour qu'il puisse avoir un comportement de block.
Sujet clos
Aller à