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;
}
quelle
vertical-align
soll nur an Elementen arbeiten, die als gerendert werdeninline
.<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-align
CSS-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!
quelle
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 ...
quelle
Sie können
position: relative;
auf das div und dannposition: absolute; top: 0;
auf einen Absatz oder eine Spanne anwenden , die den Text enthält.quelle
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.
quelle
Das alles funktioniert bei mir nicht, ich habe dies und seine Arbeit gerade überprüft:
<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.
quelle
<span>
mache es besser als<p>
oder<h6>
position:absolute; top:0px; margin:5px;
Mein Problem gelöst.
quelle
Sie können Rand oben verwenden: -50%, um den Text ganz nach oben zu verschieben.
margin-top: -50%;
quelle
Das Problem, das ich hatte, kann nicht anhand der von mir bereitgestellten Informationen erkannt werden:
<p>
Tags eingeschlossen.Ich änderte das
<p>
an<span>
und es funktioniert gut.quelle
<p>
gegenüber einem Inline-Tag<span>
.