CSS: Jak wyrównać w pionie "etykietę" i "wejście" wewnątrz "div"?

Rozważmy following code:CSS: Jak wyrównać w pionie "etykietę" i "wejście" wewnątrz "div"?

HTML:

<div> 
    <label for='name'>Name:</label> 
    <input type='text' id='name' /> 
</div>

CSS:

div { 
    height: 50px; 
    border: 1px solid blue; 
}

Jaki byłby najprostszy sposób umieścić label i input w środku z div (w pionie) ?

Źródło

2010-12-17 Misha Moroshko

do mojej wiedzy, dolna linia jest "nie można" a najbardziej leniwym sposobem jest użycie prostego '

' i zastosowanie 'valign = 'middle'' do jego '

' s. – BeemerGuy

Odpowiedz

div { 
    display: table-cell; 
    vertical-align: middle; 
    height: 50px; 
    border: 1px solid red; 
}

Zaletą tej metody jest to, że można zmienić wysokość div, zmienić wysokość pola tekstowego i zmienić rozmiar czcionki i wszystko będzie zawsze w środku.

http://jsfiddle.net/53ALd/6/

Źródło

2010-12-17 00:14:39

wygląda elegancko :) czy ktoś wie, jak ta metoda jest kompatybilna z przeglądarką? –

Dla IE, myślę, że działa tylko na IE8 lub lepiej. Dla innych przeglądarek jest w porządku. –

Nie wiedziałem o "wyświetlaczu: komórce tabeli". Czy jest to obsługiwane w niektórych przeglądarkach? – BeemerGuy

Wrap etykieta i wejście w innym div z określonej wysokości. Nie mogą pracować w IE wersji niższa niż 8.

position:absolute; 
top:0; bottom:0; left:0; right:0; 
margin:auto;

Źródło

2010-12-17 00:14:56 Trevor

Zastosowanie padding na div (górnej i dolnej) i vertical-align:middle na label i input.

przykład w http://jsfiddle.net/VLFeV/1/

Źródło

2010-12-17 00:20:24

To nie działa na jsfiddle. Zmieniłem wysokość "div", a zawartość wewnątrz nie ruszyła się wcale. Czy czegoś brakuje? – BeemerGuy

Moim zdaniem układy nie powinny mieć ustalonych wysokości pikseli ... Układy powinny płynąć płynnie wokół treści. Pochodzę jednak z dnia i czasu, kiedy przeglądarki skalowały rozmiary tekstu podczas powiększania i pomniejszania. Ostatnie przeglądarki faktycznie skalują całą stronę, więc ustawienie wysokości pikseli działa trochę lepiej. Istnieją jednak zupełnie nowe powody, dla których należy unikać ustawiania wysokości pikseli. Na przykład: elastyczne techniki układania. Właśnie dlatego byłaby to moja preferowana metoda. – thirdender

Działa to cross-browser, zapewnia większą dostępność i pochodzi z mniejszym znaczników. porzuć div. Owinąć etykietę

label{ 
    display: block; 
    height: 35px; 
    line-height: 35px; 
    border: 1px solid #000; 
} 

input{margin-top:15px; height:20px} 

<label for="name">Name: <input type="text" id="name" /></label>

Źródło

2010-12-17 01:48:56 albert

To oczywiście nie zadziała w przypadku etykiety dwuwierszowej. A jeśli masz pewność, że etykieta jest zawsze jednoliniowa, to istnieją miliony innych alternatyw. – Lashae

+11

pytanie dotyczyło etykiety z jednym wierszem, a ja odpowiedziałem. nie jestem pewien co do twojego punktu (ów) lub intencji tutaj, ale jeśli x jest tak oczywisty, powinieneś zrobić milion przykładów tego. przynajmniej po to, abyś mógł podnieść moją odpowiedź i poczuć moc swoich milionów zwycięstw. Brawo. – albert

Jest to najlepsza odpowiedź dla etykiet jednokreskowych. Specyfikacja mówi: "Jeśli atrybut for nie został określony, ale element etykiety ma przypisywalny element przypisywany do elementu formularza, wówczas pierwszym takim potomkiem w kolejności drzewa jest kontrolka oznaczona etykietą elementu etykiety." Dlatego jest to jedyne podejście, w którym można pominąć atrybuty 'for' i' id' dla maksymalnej prostoty. – parliament

Jestem świadomy tego pytano ponad dwa lata temu, ale do żadnej ostatnich widzów, tutaj jest alternatywne rozwiązanie, które ma kilka zalet w stosunku do Marc-Francois za rozwiązanie:

div { 
    height: 50px; 
    border: 1px solid blue; 
    line-height: 50px; 
}

Tutaj po prostu dodajemy tylko line-height równą wysokości div. Zaletą jest to, że możesz teraz zmienić właściwość wyświetlania elementu div, tak jak chcesz, na przykład na inline-block, a jego zawartość pozostanie w pionie. Przyjęte rozwiązanie wymaga traktowania div jako komórki tabeli. To powinno działać idealnie, w różnych przeglądarkach.

Jedyną zaletą jest to tylko jedna reguła CSS zamiast dwóch :)

Cheers!

Źródło

2012-12-27 18:32:03 MusikAnimal

Ale nie zadziała, jeśli tekst etykiety jest większy niż jedna linia – GlennG

Można użyć display: table-cell własności jak w poniższym kodzie:

div { 
    height: 100%; 
    display: table-cell; 
    vertical-align: middle; 
    }

Źródło

2015-10-27 09:25:54 abahet

bardziej nowoczesne podejście byłoby css Flex-box w użyciu.

div { 
 
    height: 50px; 
 
    background: grey; 
 
    display: flex; 
 
    align-items: center 
 
}

<div> 
 
    <label for='name'>Name:</label> 
 
    <input type='text' id='name' /> 
 
</div>

bardziej złożony przykład ... jeśli masz elementy multible w przepływie Flex można używać align-ja wyrównać pojedyncze elementy różnie do określonego align ...

div { 
 
    display: flex; 
 
    align-items: center 
 
} 
 

 
* { 
 
    margin: 10px 
 
} 
 

 
label { 
 
    align-self: flex-start 
 
}

<div> 
 
    <img src="https://de.gravatar.com/userimage/95932142/195b7f5651ad2d4662c3c0e0dccd003b.png?size=50" /> 
 
    <label>Text</label> 
 
    <input placholder="Text" type="text" /> 
 
</div>

jej również bardzo proste do centrum poziomo i pionowo:

div { 
 
    position:absolute; 
 
    top:0;left:0;right:0;bottom:0; 
 
    background: grey; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content:center 
 
}

<div> 
 
    <label for='name'>Name:</label> 
 
    <input type='text' id='name' /> 
 
</div>

Źródło

2016-10-09 03:36:32

Chciałbym, żeby to działało, gdy na etykiecie znajduje się obraz i tekst. Mam małą ikonę, po której następuje tekst, ale tekst się nie zmienia. –

działa, jeśli etykieta i tekst są oddzielnymi elementami lub jeśli twoja marka również tworzy flexbox ... –

To działało dla mnie! Świetne przykłady też! – Tony

Powiązane problemy