Pionowe Wyrównanie tekstu na etykiecie

Zostałem poproszony o wyrównanie w pionie tekstu w etykietach pól w formularzu, ale nie rozumiem, dlaczego się nie poruszają. Próbowałem wstawiać style linii przy użyciu vertical-align:top; i innych atrybutów, takich jak bottom i , ale to nie działa.Pionowe Wyrównanie tekstu na etykiecie

Wszelkie pomysły?

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

Źródło

2009-10-12 Ian

W tym celu należy zmienić właściwość vertical-align dla danych wejściowych.

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

Oto bardziej kompletna wersja. Został przetestowany w IE 8 i działa. zobaczyć różnicę poprzez usunięcie vertical-align: middle z wejścia:

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

Źródło

2009-10-12 14:39:56

Z mojego doświadczenia wynika, że pola tekstowe są dość trudne do poskromienia, a wypełnienie pionowe działa bardziej niezawodnie. – Wabbitseason

'vertical-align' nic tu nie robi (IE 8). – Joey

Przetestowałem to w IE8, a FF (ubuntu) usunęło wyrównanie w pionie, aby zobaczyć efekt i działa idealnie. Również zaktualizowałem ten przykład. –

próbowałeś line-height? Nie rozwiąże problemów, jeśli istnieje wiele etykiet wierszy, ale może to być szybkie rozwiązanie.

Źródło

2009-10-12 14:40:36 Wabbitseason

Dzięki! To zadziałało w moim przypadku ... – jpsstavares

Zaoszczędziłem dużo czasu :) –

To co zwykle zrobić „Vertical align” tekst wewnątrz etykiety:

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

Nie będzie skalować bardzo ładnie, ale działa.

Źródło

2009-10-12 14:48:23 peirix

Styl vertical-align jest używany w komórkach tabeli, więc nie zrobi nic dla ciebie tutaj.

Aby wyrównać etykiet do pól wejściowych, można użyć line-height:

line-height: 25px;

Źródło

2009-10-12 14:50:20 Guffa

Nie działa dla różnych wysokości. – Rodrigo

wyrównanie pionowe działa tylko z inline lub inline-block elementów, i to tylko w stosunku do innych inline [- blok] elementy. Ponieważ pływasz etykietą, staje się ona elementem bloku.

Najprostszym rozwiązaniem w Twoim przypadku jest ustawienie etykiety na display: inline-block i dodanie vertical-align: middle do etykiet i danych wejściowych. (Może się okazać, że wysokość tekstu jest taka, że pionowe wyrównanie i tak nie będzie miało znaczenia.)

Źródło

2009-10-12 15:40:53 DisgruntledGoat

Natknąłem się na tę próbę dodania etykiet o niektórych pionowych skrzynek radiowych. Musiałem to zrobić:

<%: 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 />

To dostaje je prawidłowo wyświetlić, gdzie etykieta jest na środku przycisku radiowego, choć musiałem podwyższyć górną wyściółkę z każdej linii, jak widać. Kod nie jest ładny, ale wynik jest.

Źródło

2009-12-16 02:57:06

miałem podobny problem i rozwiązać go owijania label w div i ustawiając następujące style:

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

Źródło

2013-03-26 11:59:48 Pablo

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

dodać kilka padding-top oraz padding-bottom zamiast wysokości.

Źródło

2017-03-19 19:57:54

Być może trzeba przeliterować, jak powinien wyglądać atrybut stylu? Być może OP nie wie, co masz na myśli. – einpoklum

Użyj css na etykiecie.

Na przykład:

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

Zauważ, że line-height dostosuje wysokość samej linii, natomiast marża będzie dyktować jak daleko innych elementów będzie poza label i wyściółka będzie dyktować dowolną przestrzeń wewnętrzną od zewnętrznej krawędzi etykiety. Margines i wyściółka praca jak ten (w prawo: Top Prawy dolny lewy), więc 2px 5px 3px 5px jest:

2px Top 5px Prawy 3px Dół 5px Lewy

Źródło

2017-04-21 16:44:28 psiclone

-1

Dodawanie disply:flex obiekt do etykiety dostanie zadanie zostało wykonane!

Źródło

2017-09-02 16:31:20

Pionowe Wyrównanie tekstu na etykiecie

Odpowiedz

Powiązane problemy