[Résolu] Centrage vertical des Grid Items

avec text-align:center au lieu de align-items çà fonctionne

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.

ah zut mal lu
et vertical-align:middle ?
Modifié par drphilgood (14 May 2023 - 21:14)

drphilgood a écrit :
ah zut mal lu
et vertical-align:middle ?

J'ai essayé sans succès :

img {vertical-align: middle}

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 !

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,

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

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

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

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.

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 ?

Amicalement,

Règle N °44 de Bongota : Signer l'armistice des points virgules

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.