28172 sujets

CSS et mise en forme, CSS3

Y a-t-il une alternative à la propriété vertical-align ?

Bonjour à vous tous,

Je voudrais savoir s'il existe une propriété CSS similaire à vertical-align qui ne déplace pas vers le bas les éléments situés en-dessous du titre principal <h1>.

Voici mon code HTML et CSS pour illustrer mes propos et juste en-dessous une capture écran :
<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <style>
        .icone {
            vertical-align: -5px;
        }
    </style>
</head>

<body>
    <h1>
        Titre principal <img src="pictogramme.png" alt="Pictogramme" class="icone">
    </h1>
    <p>
        Exemple de texte pour voir comment il se comporte avec le titre placé juste au-dessus.
    </p>
</body>

</html>

upload/1725611944-62242-capturedncran2024-09-06103815.png
Merci pour votre aide
Modifié par Felipe (07 Sep 2024 - 12:13)
Modérateur
Salut,

je passe en coup de vent.

La règle vertical-align ne peut pas avoir des valeurs en px, em, %, etc. Je t'invite à consulter la doc

Pour centrer verticalement un élement, tu as maintenant beaucoup de techniques :
- position absolute
- display flex
- display inline block + vertical align
- etc.
Modérateur
niuxe a écrit :
Salut,

je passe en coup de vent.

La règle vertical-align ne peut pas avoir des valeurs en px, em, %, etc. Je t'invite à consulter la doc



Heu!? c'est une bourrasque , si si cela est possible, c'est dans la doc Smiley cligne

Si je comprend ta question, c'est la hauteur d'interligne que tu ne veut pas voir agrandie avec une image plus haute que le texte, dans ce cas , ce serait line-height qu'il faudrait fixer.
h1{line-height:1.2}

Modifié par gcyrillus (06 Sep 2024 - 11:44)
Merci gcyrillus, j'ai testé line-height en mettant des valeurs hautes et les éléments bougent en se décalant vers le bas.

En utilisant position: absolute; puis top, les éléments ne bougent pas mais cela pose un problème de positionnement en responsive (c"est déclaé sur un écran smartphone). C'est pour ça que je cherche une alternative à vertical-align si elle existe.
Modérateur
gcyrillus a écrit :


Heu!? c'est une bourrasque , si si cela est possible, c'est dans la doc Smiley cligne

Si je comprend ta question, c'est la hauteur d'interligne que tu ne veut pas voir agrandie avec une image plus haute que le texte, dans ce cas , ce serait line-height qu'il faudrait fixer.
h1{line-height:1.2}


oups au temps pour moi. J'ai eu un doute et j'avoue que je n'ai pas fait attention. J'étais sur 3 trucs en même temps. Ça m'apprendra de répondre "à la va vite". vertical-align, je l'utilise très rarement.

Je n'avais pas pensé au line-height. En outre, ça me parait casse-gueule. Beaucoup trop de contraintes si le contexte change.

Or, avec un flex par exemple et align-self ou margin auto, on est sur du résultat dans n'importe quel contexte.
Modifié par niuxe (06 Sep 2024 - 13:21)
Modérateur
@niuxe, j'avais penser aussi en flex en premier lieu et me suite raviser à relire sa question avant de suivre ton exemple Smiley cligne

@ObiJuanKenobi peut-tu préciser le problème que tu rencontre avec la ligne du dessous et ce que tu as tenté?

Tu peut aussi tester et compléter ce codepen https://codepen.io/gc-nomade/pen/KKjbXJj (vertical-align + line-height, et grid et flex avec avec align-items ) j'y ai mis une image de 60px de haut, donc plus haute que l'interligne de base.

Cdt
Modifié par gcyrillus (06 Sep 2024 - 16:33)
Administrateur
Bonjour,

Si vertical-align: -3px; ne fonctionnait pas, on aurait été quelques un.e.s à être bien embêté.e.s avant l'avènement de Flexbox (du temps d'IE6 mais il n'y est pour rien pour une fois). Smiley vieux
Pour aligner une puce, c'était la méthode la plus utilisée. Il y avait position: relative; top: -3px; aussi. Et background-position parce que les images de fond étaient ultra-présentes.
Bon par contre avec l'arrivée du responsive puis de nouvelles possibilités CSS (et SVG, etc), adieu à cette technique !

Si tu maîtrises tous tes interlignages et la hauteur de ce que tu alignes, line-height ça se tente.
Sinon tu laisses faire le navigateur avec Flexbox et un simple align-items: center; (et flex-wrap: wrap; probablement)
Modifié par Felipe (07 Sep 2024 - 12:28)
Administrateur
ObiJuanKenobi a écrit :
Bonjour à vous tous,

Je voudrais savoir s'il existe une propriété CSS similaire à vertical-align qui ne déplace pas vers le bas les éléments situés en-dessous du titre principal &lt;h1&gt;.

Hello,

J'arrive un peu après la bataille mais si je comprends bien ta question, tu souhaites simplement supprimer (ou réduire) l'espace vertical qui se trouve entre ton <h1> et ton élément suivant (ici <p>).

En l'occurence, ce qui sépare ces deux éléments se trouvent être les marges externes (margin) verticales appliquées par défaut par le navigateur.

De ce fait, si tu supprimes la marge basse du h1 et la marge haute du <p>, les deux éléments seront collés :


h1 {margin-bottom: 0;}
p {margin-top: 0;}


On peut évidemment faire moins bourrin en décidant de ne supprimer les marges *que* si le titre est suivi d'un élément :


h1 + * {margin-top: 0;} /* pas de margin-top sur un élément s'il est après un h1 */ 



h1:has(+ *) {margin-bottom: 0;} /* pas de margin-bottom sur h1 s'il est suivi d'un élément */


J'espère que le pâté que je viens de m'amuser à écrire sera d'une quelconque utilité et qu'il ne s'agit finalement pas que d'un problème de vertical-align Smiley biggol
Administrateur
Je viens de relire ta question et je crois que je me suis effectivement totalement planté dans ma réponse précédente ! Smiley rolleyes

Tu veux donc décaler ton icône sans qu'elle pousse ce qu'il y a autour (en dessous dans ton cas). Il y a deux possibilité évidentes :

1. position: relative; C'est la solution historique pour déplacer un élément sans affecter l'entourage. Si tu veux pousser ton icône de 3px vers le bas, ajoute simplement top: 3px
2. les transformations. C'est une solution un peu plus moderne. Dans ton cas pour le même résultat : translate: 0 3px; sur l'icône fera le job
Modifié par Raphael (09 Sep 2024 - 14:47)
Prévenir un modérateur
Répondre au sujet
Aller à