Vertical Ausrichten von Text in einem Etikett

Ich wurde gebeten, den Text in den Beschriftungen für die Felder in einem Formular vertikal auszurichten, aber ich verstehe nicht, warum sie sich nicht bewegen. Ich habe versucht, Inline-Stile mit vertical-align:top; und anderen Attributen wie bottom und middle setzen, aber es funktioniert nicht.Vertical Ausrichten von Text in einem Etikett

Irgendwelche Ideen?

<dd> 
    <label class="<?=$email_confirm_class;?>" 
      style="text-align:right; padding-right:3px">Confirm Email</label> 
    <input class="text" type="text" 
      style="border:none;" name="email_confirm" 
      id="email_confirm" size="18" value="<?=$_POST['email_confirm'];?>" 
      tabindex="4" /> 
    * 
</dd>

Quelle

2009-10-12 Ian

Um dies zu tun, sollten Sie die Eigenschaft der vertikalen Ausrichtung der Eingabe ändern.

<dd><label class="<?=$email_confirm_class;?>" style="text-align:right; padding-right:3px">Confirm Email</label><input class="text" type="text" style="vertical-align: middle; border:none;" name="email_confirm" id="email_confirm" size="18" value="<?=$_POST['email_confirm'];?>" tabindex="4" /> *</dd>

Hier ist eine vollständigere Version. Es wurde in IE 8 getestet und es funktioniert. sehen Sie den Unterschied durch die vertical-align Entfernung: Mitte von dem Eingang:

<html><head></head><body><dl><dt>test</dt><dd><label class="test" style="text-align:right; padding-right:3px">Confirm Email</label><input class="text" type="text" style="vertical-align: middle; font-size: 22px" name="email_confirm" id="email_confirm" size="28" value="test" tabindex="4" /> *</dd></dl></body></html>

Quelle

2009-10-12 14:39:56

Nach meiner Erfahrung sind Textfelder ziemlich schwer zu zähmen, und vertikales Auffüllen funktioniert zuverlässiger. – Wabbitseason

'vertical-align' macht hier nichts (IE 8). – Joey

Ich habe es in IE8 getestet und FF (Ubuntu) entfernt die vertikale Ausrichtung, um den Effekt zu sehen, und es funktioniert perfekt. Ich habe das Beispiel ebenfalls aktualisiert. –

Haben Sie line-height versucht? Es wird Ihre Probleme nicht lösen, wenn mehrere Zeilenbeschriftungen vorhanden sind, aber es kann eine schnelle Lösung sein. Diese

Quelle

2009-10-12 14:40:36 Wabbitseason

Danke! Es funktionierte in meinem Fall ... – jpsstavares

Gespeichert viel Zeit :) –

ist das, was ich in der Regel zu „vertical align“ Text innerhalb Etiketten tun:

label { 
    display: block; 
    float: left; 
    padding-top: 2px; /*This needs to be modified to fit */ 
}

Es wird nicht sehr gut skalieren, aber es funktioniert.

Quelle

2009-10-12 14:48:23 peirix

Der vertical-align Stil wird in Tabellenzellen verwendet, so dass hier nichts für Sie tun wird.

Um die Etiketten auf die Eingabefelder auszurichten, Sie line-height verwenden können:

line-height: 25px;

Quelle

2009-10-12 14:50:20 Guffa

Es funktioniert nicht für variable Höhen. – Rodrigo

Vertikale Ausrichtung oder inline-block funktioniert nur mit Inline Elemente, und es ist nur relativ zu anderen Inline [- Block] Elemente. Da Sie das Etikett schweben, wird es ein Block Element.

Die einfachste Lösung in Ihrem Fall ist, das Etikett auf display: inline-block zu setzen und vertical-align: middle zu den Etiketten und den Eingängen hinzuzufügen. (Sie könnten feststellen, dass die Höhe des Textes so ist, dass die vertikale Ausrichtung sowieso keinen Unterschied macht.)

Quelle

2009-10-12 15:40:53 DisgruntledGoat

Ich stieß auf diesen Versuch, Labels für einige vertikale Radioboxen hinzuzufügen. Ich hatte dies zu tun:

<%: Html.RadioButton("RadioGroup1", "Yes") %><label style="display:inline-block;padding-top:2px;">Yes</label><br /> 
<%: Html.RadioButton("RadioGroup1", "No") %><label style="display:inline-block;padding-top:3px;">No</label><br /> 
<%: Html.RadioButton("RadioGroup1", "Maybe") %><label style="display:inline-block;padding-top:4px;">Maybe</label><br />

Diese bekommt sie richtig angezeigt werden, wo das Etikett auf dem Optionsfeld zentriert ist, obwohl ich die Top-Polsterung mit jeder Zeile zu erhöhen, hatte, wie man sehen kann. Der Code ist nicht schön, aber das Ergebnis ist.

Quelle

2009-12-16 02:57:06

hatte ich ein ähnliches Problem und löste es die label in eine div Einwickeln und Einstellung folgender Arten:

<div style="display: table; vertical-align: middle"> 
    <label style="display: table-cell;" ... > ... </label> 
</div>

Quelle

2013-03-26 11:59:48 Pablo

label { 
 
     padding: 10px 0; 
 
     position: relative; 
 
    }

einige padding-top hinzufügen und padding-bottom statt von Höhe.

Quelle

2017-03-19 19:57:54

Vielleicht buchstabieren, wie das style-Attribut aussehen sollte? Vielleicht weiß OP nicht, was du meinst. – einpoklum

Verwenden Sie CSS auf Ihrem Etikett.

Zum Beispiel:

label {line-height:1em; margin:2px 5px 3px 5px; padding:2px 5px 3px 5px;}

bemerkt, dass die Linienhöhe die Höhe der Linie anpassen selbst, während Spanne bestimmen, wie weit andere Elemente außerhalb des lable sein und padding wird jeden Innenraum diktieren von der Außenkante des Etiketts. Die Marge und Polsterung Arbeit wie dieser (im Uhrzeigersinn: oben rechts unten links), so 2px 5px 3px 5px ist:

2px Top 5px Recht 3px Bottom 5px links

Quelle

2017-04-21 16:44:28 psiclone

-1

disply:flex Eigenschaft auf das Etikett Hinzufügen erhalten die Arbeit erledigt!

Quelle

2017-09-02 16:31:20

Vertical Ausrichten von Text in einem Etikett

Antwort

Verwandte Themen