Warum ist vertikal ausgerichtet: Text oben; funktioniert nicht in CSS

Ich möchte einen Text am oberen Rand eines Div ausrichten. Es scheint, dass vertical-align: text-top;das den Trick machen sollte, aber es funktioniert nicht. Die anderen Dinge, die ich getan habe, wie das Einfügen der Divs in Spalten und das Anzeigen eines gestrichelten Rahmens (damit ich sehen kann, wo sich die Oberseite des Divs befindet), funktionieren alle einwandfrei.

#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;
}

Das Attribut "Vertikal ausrichten" gilt nur für Inline-Elemente. Es hat keine Auswirkung auf Elemente auf Blockebene, wie z. B. ein div. Außerdem verschiebt Text oben nur den Text an den Anfang der aktuellen Schriftgröße. Wenn Sie ein Inline-Element vertikal nach oben ausrichten möchten, verwenden Sie dies einfach.

vertical-align: top;

Das Absatz-Tag ist nicht veraltet. Außerdem wird das auf ein span-Element angewendete vertikale Ausrichtungsattribut in einigen Mozilla-Browsern möglicherweise nicht wie beabsichtigt angezeigt.

vertical-alignsoll nur an Elementen arbeiten, die als gerendert werden inline. <span>wird standardmäßig als Inline gerendert, jedoch nicht alle Elemente. Das Absatzblockelement <p>wird standardmäßig als Block gerendert. Mit Tabellenrendertypen (z. B. table-cell) können Sie auch die vertikale Ausrichtung verwenden.

In einigen Browsern können Sie die vertical-alignCSS-Eigenschaft möglicherweise für Elemente wie den Absatzblock verwenden, dies ist jedoch nicht vorgesehen. Als Absatz bezeichneter Text sollte mit Inhalten in schriftlicher Sprache gefüllt sein, oder das Markup ist falsch und sollte stattdessen eine von mehreren anderen Optionen verwenden.

Ich hoffe das hilft!

etwas wie

  position:relative;
  top:-5px;

Nur das Inline-Element selbst funktioniert bei mir. Sie müssen mit der Oberseite spielen, um sie vertikal zu zentrieren ...

Sie können position: relative;auf das div und dann position: absolute; top: 0;auf einen Absatz oder eine Spanne anwenden , die den Text enthält.

Sie können Kontext-Selektoren verwenden und die vertikale Ausrichtung dorthin verschieben. Dies würde dann mit dem p-Tag funktionieren. Nehmen Sie diesen Ausschnitt unten als Beispiel. Alle p-Tags in Ihrer Klasse berücksichtigen das vertikale Ausrichtungssteuerelement:

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

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

Sie können die vertikale Ausrichtung auch in beiden Abschnitten beibehalten, damit andere Inline-Elemente dies verwenden.

Das alles funktioniert bei mir nicht, ich habe dies und seine Arbeit gerade überprüft:

vertikal ausrichten: super;

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

Ich weiß, dass durch Auffüllen oder Rand funktionieren wird, aber das ist die letzte Wahl, die ich bevorzuge.

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

Mein Problem gelöst.

Sie können Rand oben verwenden: -50%, um den Text ganz nach oben zu verschieben.

margin-top: -50%;

Das Problem, das ich hatte, kann nicht anhand der von mir bereitgestellten Informationen erkannt werden:

• Ich hatte den Text in Old-School- <p>Tags eingeschlossen.

Ich änderte das <p>an <span>und es funktioniert gut.