28172 sujets

CSS et mise en forme, CSS3

Alignement du texte (et pas du bloc)

Hello les gens !

Sur l'un de mes projets, je souhaites mettre en place le fameux alignement vertical. Un vrai casse tête, mais j'y suis presque Smiley smile

Mes hauteurs de lignes ainsi que mes marges bonnes. Néanmoins, il y a un dernier point que je n'arrive pas à régler : l'alignement vertical du texte. En gros, mon texte est décaler "vers le bas", au lieu d'être centré verticalement.

Voici un petit screen afin de mieux comprendre mon explication :

http://img11.hostingpics.net/pics/537638screenshot.png

Avez-vous une petite idée ? J'ai essayé plusieurs choses comme le vertical-align baseline, text-top, text-bottom, mais rien n'y fait Smiley decu

Merci beaucoup !
Modérateur
Bonjour

j'avoue que l'image n'aide pas beaucoup à comprendre le but recherché… ?Et je ne vois pas en quoi le texte est décalé «vers le bas» ??
Salut,

oui ta démarche est curieuse.

Si ton bloc à une hauteur définie, tu peux le passer en display:table et appliquer un vertical-align:baseline a ton bloc texte enfant.
Tu peux aussi jouer avec la position relative et appliquer un bottom:0.

Si ton bloc n'a pas de hauteur définie, jouer avec un padding-top:Xpx et un padding-bottom:0 ?
Salut kustolovic,

Sur l'image, en regardant plus en détail, tu remarquera que le texte (<p> ou <h2>) est mal aligné : il est 2 ou 3px en dessous de la ligne "de calage".

Exemple pour "Le contenu", tu verra qu'il est 3px en dessous de la ligne.

En espérant t'avoir aidé à comprendre Smiley smile
Modérateur
ILeG3nDz a écrit :
Sur l'image, en regardant plus en détail, tu remarquera que le texte (&lt;p&gt; ou &lt;h2&gt;) est mal aligné : il est 2 ou 3px en dessous de la ligne "de calage".

Là je comprends mieux le but recherché. Du coup la vraie question est: d'où sort ces lignes de calages et comment sont-elles calculées? Plus précisément la question est l'origine de ces lignes de calages en haut. Le modèle CSS n'offrant pas une fonctionnalité de «grille de lignes de bases» c'est forcément une bricole.

p.s. : par ailleurs une marge du bas de 2rem pour une hauteur de ligne de 1.5rem décalera automatiquement deux p consécutifs, de sorte que un seul paragraphe sur trois sera correctement aligné.
Modifié par kustolovic (25 Feb 2015 - 15:28)
Yop,

Concernant les lignes horizontales, c'est un script qui créer x blocs de 8px de haut (bordure comprise). Du coup, mes valeurs type line-height, margin, font-size sont un multiple de 8.

J'ai mis en place une grille de 8, 16 et 32px (cf bouton sur la droite du screenshot), ce qui me permet de mettre en place mon alignement vertical.

Je n'ai pas compris ton dernier point sur la hauteur de ligne et sa marge ?
Modérateur
Pourtant c'est le nœud du problème, un petit schéma:

upload/32231-lineheight.jpg

Les lignes bleues sont celles créées par ton script.
En rouge les lignes de base (pas dessinées sur une page) sur lesquelles viennent se poser le texte.

Pour avoir un alignement correct, il faudrait décaler ces lignes bleues (ou le premier paragraphe/titre) selon la distance entre le haut de la boîte et la ligne de base. Cette distance dépend: De la police, de sa taille, et de la hauteur de ligne.
Hello kustolovic,

Merci beaucoup pour ton schéma, je comprends mieux ! Mais du coup, avec ma config, ça devrait être bon .. mes lignes font 8px de haut (bordure du bas comprise) et j'ai ajouter que des multiples de 8 :


h2 {
    font-size: 24px;
    line-height: 32px;
    margin-top: 0;
    margin-bottom: 0;
}

p {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 32px;
}


Au début je pensais que le problème venait de ma font (Roboto, importée de Google Font), mais avec arial j'ai le même résultat.

J'ai peut-être oublié un truc ?
Modifié par ILeG3nDz (26 Feb 2015 - 08:41)
Sujet clos
Aller à