28172 sujets

CSS et mise en forme, CSS3

Centrage vertical [résolu]

Bonjour TLM !

J'essaie de faire aligner un texte de lien de façon verticale, et après avoir lu la section dans la FAQ je comprends pas pourquoi ça fonctionne pas :

<a href="">Par là ?</a>


a {
display: inline-block;
height: 50px;
vertical-align: middle;
border: 1px solid red;
}


le lien : http://goirand.christophe.free.fr/Site_test/bug/valign/
Modifié par ChrisG (25 Jan 2009 - 16:09)
Bonjour !

Benjamin D.C. a écrit :
Un élément en display:inline-block traduit le vertical-align par un alignement des boîtes et non des contenus.


Tu veux dire un alignement d'une boite par rapport à une autre donc deux éléments imbriqués avec un rendu display:block ?

On peut donc pas faire un centrage vertical d'un élément de type inline dans un élément de type block ?

et pour le display:table-cell j'ai vu que ça marche mais pas pour IE c'est pour ça que je cherche une autre solution.

J'ai lu la faq mais c'est pas encore très clair pour moi...
ChrisG a écrit :
On peut donc pas faire un centrage vertical d'un élément de type inline dans un élément de type block ?

Si bien sûr:
a {display:block; line-height:50px;}
ChrisG a écrit :
On peut donc pas faire un centrage vertical d'un élément de type inline dans un élément de type block ?

De manière souple et fiable, et en gardant le rendu par défaut du bloc (display: block)? Non. Sinon il y a l'astuce mentionnée par Benjamin (mais manque de fiabilité pour du texte, à tout prendre mieux vaut un line-height: 1 et du padding-top pour faire descendre le texte), et bien sûr la possibilité de passer le bloc en display: table-cell (non reconnu par IE 6-7).
Ok merci vous 2.

Au fait j'ai vu que sur FF line-height: normal n'est pas identique à line-height: 1 (ou 100%) alors que c'est dit sur la doc mediabox que les 3 c'est la même chose !
ChrisG a écrit :
Au fait j'ai vu que sur FF line-height: normal n'est pas identique à line-height: 1 (ou 100%) alors que c'est dit sur la doc mediabox que les 3 c'est la même chose !

Pour la propriété line-height, les valeurs "1" et "100%" sont strictement identiques. Par contre ce n'est pas la même chose qu'un line-height: normal, qui signifie: utiliser le paramètre de hauteur de ligne contenu dans la fonte.

C'est donc une erreur de la documentation Mediabox, à corriger.

Et en cas de doute: http://www.w3.org/TR/CSS21/
Modérateur
bonjour,

a cette occasion , plutot que de me garder un truc bien pratique je propose un petit utilitaire a user en ligne ou a telecharger 47ko
mini-dico de lien pour acceder directement a la propriété rechercher sur le site du W3C sans chercher la bonne page pendant quelques minutes :
http://yidille.free.fr//plux/valign/uploads/dico.txt a renommer en .php , en action la : http://yidille.free.fr//plux/valign/uploads/index.php
Limiter pour le moment a css 2.1 , propriétes , selecteur et pseudo-elements.


ChrisG a écrit :
Ok merci vous 2.

Au fait j'ai vu que sur FF line-height: normal n'est pas identique à line-height: 1 (ou 100%) alors que c'est dit sur la doc mediabox que les 3 c'est la même chose !

cela a peut-etre a voir avec un bug sur br ?

br{font-size:1px;line-height:1px;}


GC
Modifié par gcyrillus (26 Jan 2009 - 08:46)
gcyrillus a écrit :
Limiter pour le moment a css 2.1 , propriétes , selecteur et pseudo-elements.

Le principe est intéressant. Il faudrait peut-être qu'on fasse un truc comme ça (mais plus large, avec HTML 4.01), pour la trousse à outils pour Alsacréations. Ou bien un moteur de recherche google personnalisé. Smiley smile
Sujet clos
Aller à