Caler un texte en bas en position absoluteFermé

Question

Bonjour,

Je n'arrive pas à caler un texte à 20 px du bas en position absolute, j'ai réussi à le centrer horizontalement grâce aux forums, mais verticalement :/

Merci pour votre aide

Mes CSS :

.enba h1{
    position: absolute;
    font-size: 15vw;
    bottom: 20px;
    left: 50%; /* position the left Edge of the element at the middle of the parent */
    transform: translateX(-50%);}

LM
Macintosh / Chrome 106.Merc0.0.0

Pollux · Answer

Salut,

en position absolue la valeur bottom indique le décalage à partir du bas, donc 20px signifie à partir du bas +20pixels ce qui sera toujours en dehors de la page.

Si vous voulez utiliser bottom vous pouvez indiquer un décalage négatif.

Je vous conseille d'éviter des unités absolues comme le pixels surtout que pour les autres valeurs vous êtes en unités  relatives.

La propriété transform semble faire double emploi ici:

left: 50%;/* décale en absolue donc à partir du point le plus à gauche de l'écran de 50%*/

transform: translateX(-50%);/* effectue une translation sur l'axe horizontal de -50% */

Ne serait il pas plus simple de supprimer aussi bien left que transform en d'utiliser une marge? Par ex.

margin-left:5%;

Un titre h1 étant un titre principal c'est curieux de le mettre à la fin de la page. Même si c'est possible il vaut mieux éviter d'avoir plusieurs titres h1 et de n'en garder qu'un si vous en avez plusieurs cela facilite le référencement. Ou alors utilisez un titre h2,h3,h4,h5,h6 selon l'importance du titre(mais un titre h1 est quand même recommandé dans la page , il donne des informations générale sur le référencement du contenu principal donc est assez important)

lamontange · Answer

Salut Pollux et merci pour ta réponse,

Avec un margin-bottom négatif, le h1 reste "fixé" en haut :( Pour ce qui est du margin-left, cela me semble plus compliqué qu'un translateX, Non ?

Merci pour toutes ces précisions sur le "h", je ne comprenais pas pourquoi il fallait éviter de les multiplier ;)

Merci de ton aide,

LM

Caler un texte en bas en position absolute

2 réponses

Discussions similaires

Newsletters