28172 sujets

CSS et mise en forme, CSS3

[Résolu] Centrage vertical des Grid Items

Bonjour,

Voir le codepen

Les codes html et css sont simples, je ne comprends pas pourquoi les deux éléments ne sont pas centrés verticalement l'un par rapport à l'autre.
C'est ce que je vois sur Firefox.

Dans la vie réelle les deux éléments sont bien centrés si le texte est sur une ligne.
Quand on rétrécit la fenêtre et que le texte passe sur deux lignes l'image est calée en haut alors que j'espérais qu'elle soit centrée par rapport à la hauteur des deux lignes.

Ce n'est pas que ce soit moche mais j'aimerais comprendre une solution pour centrer.
Modifié par boteha_2 (14 May 2023 - 19:34)
drphilgood a écrit :
avec text-align:center au lieu de align-items çà fonctionne


Ben non...

text-align n'a rien à voir avec l'alignement vertical.

J'ai quand même fait l'essai, cela centre le texte horizontalement dans son parent, c'est l'effet attendu.
drphilgood a écrit :
ah zut mal lu
et vertical-align:middle ?


J'ai essayé sans succès :

img {vertical-align: middle}
Modérateur
Bonjour,
boteha_2 a écrit :
je ne comprends pas pourquoi les deux éléments ne sont pas centrés verticalement l'un par rapport à l'autre.
Y a rien de pire que le centrage vertical ! Smiley cligne

Ci-dessous une possibilité avec du flex :
ul {
  list-style: none;
  margin: 15px 0 0;
}
ul > li {
  padding: 0;
  margin: 0;
}

ul {
  display: flex;
  align-items: center;
}

img {
  display: block;
  margin-right: 15px;
}

ul a {
  display: inline-block;
  margin-left: 15px;
}

Amicalement,
Modérateur
Bonsoir,

une erreur dans ta feuille de style: align-items: middle; qui devrait être align-items: center; (middle va bien pour vertical-align cependant)

cdt
Bonjour,

gcyrillus a écrit :
Bonsoir,
une erreur dans ta feuille de style: align-items: middle; qui devrait être align-items: center; (middle va bien pour vertical-align cependant)
cdt


Oups... Corrigé.

D'ailleurs cela semble bien centré à présent, voit le codepen.

parsimonhi a écrit :
Y a rien de pire que le centrage vertical ! Smiley cligne


Flex et Grid sont supposés avoir résolu le casse-tête.
Merci pour ton code en Flex mais pas de raison que cela ne marche pas en Grid.

Mon code semble bon pour le codepen mais dans la vie réelle sur 2 lignes l'image est calée en haut.

J'y reviens dès que j'ai le temps.
Modifié par boteha_2 (15 May 2023 - 13:05)
Juste en passant, sans que ça doive avoir une incidence sur le résultat, tu devrais mettre des ; là où il en manque (en tous cas sur ton pen il en manque à plusieurs endroits).
Non Olivier, je ne rallume pas la guerre des point virgule Smiley lol Smiley biggrin
Bongota a écrit :
Juste en passant, sans que ça doive avoir une incidence sur le résultat, tu devrais mettre des ; là où il en manque (en tous cas sur ton pen il en manque à plusieurs endroits).
Non Olivier, je ne rallume pas la guerre des point virgule Smiley lol Smiley biggrin


En css le point virgule[ est un séparateur.
Il n'est pas utile d'en mettre sur la dernière propriété d'une déclaration.
De ce point de vue je ne vois aucune erreur dans le codepen.
Modérateur
Bonjour,

boteha_2 a écrit :
En css le point virgule est un séparateur. Il n'est pas utile d'en mettre sur la dernière propriété d'une déclaration. De ce point de vue je ne vois aucune erreur dans le codepen.

Règle de parsimonhi N°43 : "Tu mettras des points-virgules en fin d'instruction, même quand tu penses que ce n'est qu'optionnel !"

La raison est que le temps que tu perds à trouver une erreur découlant d'un point-virgule oublié est très supérieur au temps que tu gagnes en n'en mettant pas "de temps en temps".

À noter que quand tu fais "Format CSS" via le menu de CodePen, il rajoute les points-virgules que tu as pourtant pris grand soin de ne pas mettre là où c'est possible de ne pas en mettre. N'est-ce pas ballot en fin de compte d'avoir dépenser toute cette énergie à se poser des questions sur la nécessité ou pas de mettre un point-virgule en fin d'instruction pour finalement se retrouver avec un code formaté qui les contient tous ? Smiley cligne

Amicalement,
Bonjour,

D'accord pour l'armistice des points virgules

Autrement j'ai trouvé l'origine de mon problème dans la vie réelle.

Dans le RESET de la feuille de style principale : 

img, etc. {margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline}


Je corrige sans problème au niveau du code de ma liste :

img {vertical-align: middle}


Je coche Résolu.
Prévenir un modérateur
Répondre au sujet
Aller à