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

StackOverflow https://stackoverflow.com/questions/924282

  •  06-09-2019
  •  | 
  •  

Question

Je veux aligner un texte sur le sommet d'une div. Il semble que vertical-align: text-top; devrait faire l'affaire, mais il ne fonctionne pas. Les autres choses que je l'ai fait, comme mettre les divs en colonnes et l'affichage d'une bordure en pointillés (donc je peux voir où le haut de la div est) tout va bien de travail. 

#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;
}
Était-ce utile?

La solution

L'attribut vertical-align est pour les éléments en ligne seulement. Il n'a aucun effet sur les éléments de niveau bloc, comme un div. Aussi text-top ne se déplace que le texte en haut de la taille de police actuelle. Si vous souhaitez aligner verticalement un élément en ligne vers le haut juste utiliser. 

vertical-align: top;

La balise de paragraphe n'est pas dépassée. En outre, l'attribut vertical-align appliquée à un élément de réglage de sensibilité peut ne pas afficher comme prévu dans certains navigateurs Mozilla.

Autres conseils

vertical-align est seulement censé travailler sur des éléments qui sont rendus comme inline. <span> est rendu en ligne par défaut, mais pas tous les éléments sont. L'élément de bloc de paragraphe, <p>, est rendu en tant que bloc par défaut. Tableau rendu types (par exemple table-cell) vous permettra d'utiliser verticale ainsi que l'alignement.

Certains navigateurs peuvent vous permettre d'utiliser la propriété CSS vertical-align sur des éléments tels que le bloc de paragraphe, mais ils ne sont pas censés. Texte désigné comme un paragraphe doit être rempli de contenu en langue écrite ou la majoration est incorrecte et devrait utiliser un d'un certain nombre d'autres options au lieu.

J'espère que cela aide!

quelque chose comme 

  position:relative;
  top:-5px;

juste sur l'élément en ligne lui-même fonctionne pour moi. À jouer avec le dessus pour qu'il soit centré verticalement ...

Vous pouvez appliquer position: relative; à la div puis position: absolute; top: 0; à un paragraphe ou étendue à l'intérieur de celui-ci contenant le texte.

Vous pouvez utiliser les sélecteurs contextuels et déplacer le vertical-align là. Cela fonctionnerait avec la balise p, puis. Prenez cet extrait ci-dessous à titre d'exemple. Toutes les balises p au sein 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 garder le alignement vertical dans les deux sections afin que les autres, les éléments en ligne utiliseraient cela.

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

  

vertical-align: super; 

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

Je sais par padding, margin fonctionnera, mais qui est le dernier choix que je préfère. 

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

a résolu mon problème.

Vous pouvez utiliser margin-top: -50% pour déplacer le texte jusqu'au sommet de la div

. 
margin-top: -50%;

Le problème que je devais ne peut pas être faite de l'information que je vous ai fourni:

  • J'avais le texte enfermé dans les vieilles étiquettes de <p> scolaire.

J'ai changé le <p> à <span> et il fonctionne très bien.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top