28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous !

Ça fait maintenant une bonne heure que j'essaie de centrer du texte verticalement dans une <div>, et je suis pas loin du nervous breakdown.

J'ai déjà recherché sur google et alsacreations, mais aucune solution ne semble convenir à ma situation :

- les marges négatives nécessitent les dimension du bloc conteneur, or la hauteur de mon bloc est réglée sur auto.
- "height/line-height" ne fonctionne que pour une seule ligne de texte, mais j'en ai plusieurs.
- "display: table-cell" réduit en bouillie ma mise en page.
- "display: inline-block" couplé à "vertical-align : middle" reste sans effet.

Et il faut absolument que ce bloc soit en CSS pour mon site, donc je ne peux pas passer par des tableaux.
Il doit bien exister une alternative pour centrer ces quelques pauvres lignes dans mon cadre, non ?

Merci d'avance. Smiley smile
Modérateur
Bozomobile a écrit :
Bonjour à tous !
- les marges négatives nécessitent les dimension du bloc conteneur, or la hauteur de mon bloc est réglée sur auto.

et c'est pas plus mal de ne pas s'en servir si tu ne peut pas gerer ou contenir les effets de bord en cas de texte surdimensionner ou contenu 'aléatoires'.
Bozomobile a écrit :

- "height/line-height" ne fonctionne que pour une seule ligne de texte,

bah oui , la FAQ te met en garde justement
Bozomobile a écrit :
mais j'en ai plusieurs.
- "display: table-cell" réduit en bouillie ma mise en page.

Sans appliqué a l'ensemble des conteneurs impliqués (parents et enfants) ,
les régles 'adjacentes' ('table , table-row , table-cell ) , le résultat peut-etre aléatoires en effet ,
chaque navigateur tenteras d'interpreter aux mieux en ajoutant les régles manquante ou zappant celle que tu essaie d'appliquer.
Ces régles ont aussi un impact sur le contexte de formatage.
Bozomobile a écrit :

- "display: inline-block" couplé à "vertical-align : middle" reste sans effet.

Tout comme les elements ou contenu de type inline , qui peuvent recevoir la régles vertical-align:middle; et s'aligner verticalement les uns par rapport aux autres .... il faut qu'il soit au moins 2 minimum Smiley smile
Cette régle joue aussi sur le contexte de formatage (pour IE ce sera le 'haslayout' )avec les mêmes effets.
Pour IE et les elements de type block , pour avoir un vrai inline-block : c'est en Commentaire Conditionnel :display:inline;zoom:1; ( a force de le repeter , ça finira par passer dans les moeurs Smiley smile ).
Bozomobile a écrit :

Et il faut absolument que ce bloc soit en CSS pour mon site, donc je ne peux pas passer par des tableaux.
Il doit bien exister une alternative pour centrer ces quelques pauvres lignes dans mon cadre, non ?
Intégriste ? , non je déconne , mais il y a un moment ou il faut savoir prendre une décision , la mode change , ce qui est un must aujourd'hui est ringards demain , et vintage aprés demain ... faut pas se laisser aller a de fausses considérations.

La solution est dans la FAQ , puis si ton div est en : height:auto; ,sa hauteur est alors conditionnée par son contenu , donc rien a centré , Non ?

GC