Pourquoi vertical-align: text-top; ne fonctionne pas en CSS

Question

Je veux aligner du texte en haut d'une div. Il semble que vertical-align: text-top; devrait faire l'affaire, mais cela ne fonctionne pas. Les autres choses que j'ai faites, telles que mettre les div en colonnes et afficher une bordure en pointillés (pour que je puisse voir où se trouve le haut de la div) fonctionnent bien.

 #header_p { 
    font-family: Arial;
    font-size: 32px;
    font-weight: bold;
}
#header_selecttxt {
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    vertical-align: text-top;
}
#header_div_left { 
    float: left; 
    width: 50%;
    border: dashed;
    vertical-align: top;
}
#header_div_right { 
    margin-left: 50%;
    width: 50%;
    border: dashed;
}
 

Answer 1

vertical-align n'est censé travailler sur des éléments qui sont rendues en inline. <span> est rendu inline par défaut, mais pas tous les éléments sont. Le paragraphe élément de bloc, <p>, est rendu sous la forme d'un bloc par défaut. Table de rendu types (par exemple, table-cell) vous permettra d'utiliser vertical-align ainsi.

Certains navigateurs peuvent vous permettre d'utiliser l' vertical-align propriété CSS sur des éléments tels que le paragraphe bloc, mais ils ne sont pas censé le faire. Texte désigné comme un paragraphe doit être rempli avec de l'écrit en langue du contenu ou la marque est incorrecte et doit être à l'aide de l'un des un certain nombre d'autres options à la place.

J'espère que cela aide!

Answer 2

quelque chose comme

   position:relative;
  top:-5px;
 

juste sur l'élément en ligne lui-même fonctionne pour moi. Il faut jouer avec le haut pour le centrer verticalement ...

Answer 3

Vous pouvez appliquer position: relative; à la division, puis position: absolute; top: 0; à un paragraphe ou à une plage de celui-ci contenant le texte.

Answer 4

Vous pouvez utiliser des sélecteurs contextuels et déplacer le vertical-align là-bas. Cela fonctionnerait avec la balise p, alors. Prenez cet extrait ci-dessous à titre d'exemple. Toutes les balises p dans votre classe respecteront le contrôle vertical-align:

 #header_selecttxt {
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
}

#header_selecttxt p {
    vertical-align: text-top;
}
 

Vous pouvez également conserver l'alignement vertical dans les deux sections afin que d'autres éléments en ligne l'utilisent.