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

78

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;
}
Ankur
quelle

Antworten:

117

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.


quelle
2
Hat bei mir nicht funktioniert. Der Text wird immer mittig vertikal ausgerichtet :(
AlikElzin-kilaka
22

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!

Mechler
quelle
11

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

Todd
quelle
4

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.

Evan Meagher
quelle
1

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.

RockAndRollBot
quelle
1

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.

Ajay2707
quelle
Ich weiß nicht warum, aber <span>mache es besser als <p>oder<h6>
yu yang Jian
0
position:absolute;
top:0px; 
margin:5px;

Mein Problem gelöst.

CodeNoob
quelle
-1

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

margin-top: -50%;
Mr. Doomsbuster
quelle
-3

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.

Ankur
quelle
14
<p> ist sicherlich keine alte Schule, der Himmel verbietet, dass eine Website ausschließlich aus <div> und <span> besteht.
Ryan Florence
Ich habe nur begrenzte Web-Erfahrung, aber wenn ich Raw <div> versuche und nur Tabellen zum Anzeigen von Informationen verwende, fällt es mir ziemlich schwer, zum Beispiel alles im 'Wrapper' <div> zu behalten. Bei Tabellen kommt das selten vor, wenn sich etwas in einer Zelle befindet, springt es normalerweise nicht heraus!
Coops
1
Der entscheidende Unterschied liegt in der Verwendung eines Block- Tags <p>gegenüber einem Inline-Tag <span>.
Lawrence Dol
1
Stellen Sie die Anzeige als Inline-Block ein, dann funktioniert in Ihrem Fall nur Ihre vertikale Ausrichtung.
SƲmmēr Aƥ