Discussion :

[moimp]

Bonjour à tous,
Dans le HTML suivant <label><span><strong>Adresse</strong></span><textarea name="address"></textarea></label><br>, le texte est aligné en bas et je voudrais l'aligner en haut ou au milieu.
J'ai essayé le CSS suivant qui fonctionne pour les deux premières propriétés mais pas pour la dernière. C'est surtout gênant pour les zones de textes sur plusieurs lignes.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
label span
{
	display:inline-block;
	width:8rem;
	vertical-align:middle;
}

[moimp]

Re-bonjour,
Je vois que ce n'est pas le texte qui est mal positionné mais c'est la position du label par rapport à la zone de texte. Dans l'image ci-dessous je veux que le haut du label soit aligné avec le haut de la zone de texte.

[NoSmoking]

Bonjour,

je veux que le haut du label soit aligné avec le haut de la zone de texte.
...
vertical-align:middle

pourquoi middle et pas top ?

Et que dire de la construction HTML !!?!!

[moimp]

La construction html m'a été recommandé sur ce site et, à l'usage, elle s'avère très efficace. Elle évite le recours à l'id et simplifie le CSS. Je ne sais plus ni par qui ni quand ce conseil m'a été donné.
top ou middle, je teste les deux et je verrai ce qui donne le meilleur rendu. Pour l'instant ni l'un ni l'autre ne fonctionne.

[Obsidian]

Bonjour,

La construction html m'a été recommandé sur ce site et, à l'usage, elle s'avère très efficace. Elle évite le recours à l'id et simplifie le CSS. Je ne sais plus ni par qui ni quand ce conseil m'a été donné.

C'est vrai que les deux approches sont possibles et qu'elles se valent en fonction du contexte.

D'un côté, un label est une étiquette, donc elle ne devrait contenir que son propre texte et être indépendante du reste, mais cela oblige effectivement à utiliser un id="" pour l'associer à l'élément qu'elle cible (spécialement utile avec les cases à cocher, car cela permet de cliquer sur la case et sur l'étiquette, plus simplement sur la case seule) ;

D'un autre côté, le recours à l'id impose l'unicité par définition. C'est gênant lorsque l'on utilise des template par exemple, et que l'on veut pouvoir répliquer facilement une section entière. Dans ce cas, intégrer l'élément cible au corps du label permet à la fois d'éviter le recours à des méta-données (l'id) et de définir directement la relation hiérarchique au sein du document.

top ou middle, je teste les deux et je verrai ce qui donne le meilleur rendu. Pour l'instant ni l'un ni l'autre ne fonctionne.

Centrer un élément un sein d'un bloc a toujours été un problème récurrent en CSS… jusqu'à CSS 3 !

Paradoxalement, text-align et vertical-align ne servent pas directement à aligner un élément par rapport à son parent, mais à choisir la disposition du texte, et par extension des éléments inline, comme le ferait un traitement de texte. Ce sont des options de typographie et de mise en page.

On a donc left-center-right-justified pour text-align, ce qui permet d'arriver à ses fins avec le reste aussi. Par contre, vertical-align sert à aligner entre eux des éléments inline de hauteurs différentes au sein d'une même ligne. Par exemple, dans l'exemple suivant :

debutMilieufin

Les trois mots sont alignés en bottom ou en baseline, selon les cas, c'est-à-dire qu'on va aligner entre eux les « bas » respectifs de tous les éléments pour les disposer sur une ligne, mais la ligne elle-même continue de suivre le flux normal au sein du document, c'est-à-dire de gauche à droite puis de haut en bas. Centrer un élément au sein d'une boîte nécessite donc déjà de fixer une hauteur à cette boîte.

Ensuite, il fallait jusqu'à CSS 2 recourir à des artifices comme display: cell, qui utilisait le modèle des tables dans lesquelles le contenu de cellules est naturellement centré verticalement, mais qui fonctionne de manière erratique si ce n'est pas au sein d'une table justement, soit de diviser le container en deux parties de 50% chacune, s'aligner sur le haut de la deuxième et remonter artificiellement avec top: l'étiquette elle-même de 50% de sa propre hauteur. Une plaie…

Depuis CSS 3, en revanche, il existe display: flex et je ne saurais trop t'encourager à y consacrer un après-midi pour couvrir le sujet en entier et ne plus jamais avoir à revenir en arrière ensuite, car le modèle a été conçu pour corriger tout ce qui manquait jusqu'ici (ça avec display: grid).

Tu pourras alors utiliser justifify-content: et align-items pour définir de façon claire la manière donc les éléments doivent être disposés au sein de ta boîte.