web-dev-qa-db-fra.com

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

Je veux aligner du texte en haut d'une div. Il paraît 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;
}
cssvertical-alignment
70
Ankur

L'attribut vertical-align concerne uniquement les éléments en ligne. Cela n'aura aucun effet sur les éléments de niveau bloc, comme un div. De plus, text-top ne fait que déplacer le texte en haut de la taille de la police actuelle. Si vous souhaitez aligner verticalement un élément en ligne vers le haut, utilisez simplement ceci.

vertical-align: top;

La balise de paragraphe n'est pas obsolète. En outre, l'attribut vertical-align appliqué à un élément span peut ne pas s'afficher comme prévu dans certains navigateurs mozilla.

108
vanstee

vertical-align n'est censé fonctionner que sur les éléments rendus sous la forme inline. <span> est rendu par défaut en ligne, mais tous les éléments ne le sont pas. L'élément de bloc de paragraphe, <p>, est rendu sous forme de bloc par défaut. Types de rendu de table (par exemple, table-cell) vous permettra également d’utiliser vertical-align.

Certains navigateurs peuvent vous permettre d’utiliser le vertical-align Propriété CSS sur des éléments tels que le bloc de paragraphe, mais ils ne le sont pas. Le texte désigné en tant que paragraphe doit être rempli avec un contenu en langue écrite ou la balise est incorrecte et devrait plutôt utiliser l'une des nombreuses options.

J'espère que ça aide!

19
mechler

quelque chose comme

  position:relative;
  top:-5px;

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

9
Todd

Vous pouvez appliquer position: relative; au div puis position: absolute; top: 0; à un paragraphe ou à une plage contenant le texte.

4
Evan Meagher

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 de 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.

1
RockAndRollBot

Le tout ci-dessus ne fonctionne pas pour moi, je viens de vérifier ceci et son travail:

alignement vertical: super;

 <div id="lbk_mng_rdooption" style="float: left;">
     <span class="bold" style="vertical-align: super;">View:</span>
 </div>

Je sais que le rembourrage ou la marge fonctionneront, mais c'est le dernier choix que je préfère.

0
Ajay2707
position:absolute;
top:0px; 
margin:5px;

Résolu mon problème.

0
CodeNoob