[css][html] wyśrodkowanie w formularzu Opcje

[aladin07]

witam

moj problem polega na wysrodkowaniu pol label i input czy tez select w
wierszu listy uporzadkowanej

formularz wyglada powiedzmy tak :

[HTML] pobierz, plaintext 
<fieldset>
<legend></legend>
<form name="" action="" method="">
<ul>
<li><label>name1</label>
<input type="text" name="name1" id="name1" size="30" />
</li>
<li><label>name2</label>
<input type="text" name="name2" id="name2" size="30" />
</li>
<li><label>name3</label>
<input type="text" name="name3" id="name3" size="30" />
</li>
<ul>
</form>
</fieldset>
[HTML] pobierz, plaintext 

i teraz powiedzmy ze ustawiamy css'em

[HTML] pobierz, plaintext 
li{
height: 40px;
}
li label{
float: left;
font:10px;
}
li input{
float: left;
height:30px;
}
[HTML] pobierz, plaintext 

teraz chodzi mi o to ze w liscie ustalam wysokosc wieksza niz wysokosc label i input
i wszystko ustawia mi sie idealnie przy gornej krawedzi
a chcialbym zeby zarowno label jak i input ustawial sie w srodku wyokosci li ale nie mam pojecia
jak to zrobic - a juz pare tutoriali przejrzalem - tam jednak nikt nie ustawia jak ja wyskosci
li
i nie chodzi mi tu o ustawianie za pomoca paddingow czy marginow - zeby po zmianie
wysokosci li nie bylo znowu dlubania w css-ie

czy jest w ogole taka mozliwosc?

[melkorm]

Jeżeli dobrze rozumiem o co Tobie chodzi to jest opcja line-height ale bodajże oczywiście IE tego nie "przełknie" więc już lepiej chyba zrobić padding/margin niż bawić się w komentarze warunkowe dla IE ... ale to moja opinia może jest jakieś lepsze rozwiązanie to z chęcią posłucham x)

[aladin07]

to line-height juz przerabialem ale z tego co pamietam dawalo to tylko efekt dla samego
label a input dalej siedzial przy gornej krawedzi li

[melkorm]

hmm a przypadkiem li nie łapie tych floatów i tak jakby ten label i input "nie są" w li ? Bo tak mi się zdaje że tak własnie jest ... daj tylko dla li float:left, i zobacz co się stanie (IMG:http://forum.php.pl/style_emoticons/default/biggrin.gif)

no i ogólnie przypisywanie float'u el liniowemu?

to line-height juz przerabialem ale z tego co pamietam dawalo to tylko efekt dla samego
label a input dalej siedzial przy gornej krawedzi li

a tak się działo bo float dla label nei działał, i li go "łapało" a input z floatem nie brał tego pod uwagę bo jest tak jakby w "powietrzu".

Nie wiem czy dobrze wyjaśniłem ale bankowo te floaty są złe (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif)

[aladin07]

no coz czlowiek sie caly czas uczy a glupie bledy i tak bedzie popelnial - ale moze za jakis czas juz sie ich ilosc zniweluje znacznie (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)



w kazdym razie te floaty pomogly:) na wysrodkowanie label i input wzgledem li - za co serdecznie dziekuje

ale z drugiej strony teraz zarowno label (ktore jak to z tekstem bywa przyjmuje rozna szerokosc) jak i input
sa rownane do lewej
i mimo ze dla label ustawiam width o stalej szerokosci - w celu rownego ustawienia inputow
od lewej krawedzi li to i tak przegladarka ustawia szerokosc adekwatnie do ilosci tekstu w label
oczywiscie margin-left dla inputa nie pomoze

co tu mozna by zastosowac?

[melkorm]

możesz im narzucić wyświetlanie blokowe, display:block :] I dopiero wtedy możesz nadawać szerokość i wysokość (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

[aladin07]

no tak ale wracamy tu chyba do punktu wyjscia
nadanie im display:block (chyba ze znowu czegos nie wiem) bedzie wymagalo nadanie im
floatow zeby ustawic je w jednym rzedzie a nie jeden pod drugim - czyli znowu wszystko wyladuje przy gornej krawedzi li
a jak daje display:block-inline nadal nie daje mi mozliwosci regulowania szerokosci

ze tak sie glupio spytam o co w tym wszystkim chodzi?(IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

[melkorm]

Chodzi o dobre zrozumienie CSS'a (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif)

No i jeżeli chcesz mieć "wydzielone miejsce" na text, musisz to ubrać w el. blokowy - po to one są by opisywać elemnty blokowe.

Lub tak ułożyć poprzednie warstwy że taka sytuacja nie będzie potrzebna, ale to już kwiestia projektu / założeń itp.

No i chyba tutaj będziesz musiał uzyć display:block; i floatów ;]

tzn. gdy się widzi resultat itp to napewno kod można by uprościć nie chce Tobie źle radzić ... no ale na ten moment tylko tyle moge powiedzieć, najlepiej to pobaw się z display:block; itp. eksperymentuj testuj na kilku przeglądarkach - i te rozwiązanie które będzie najbardziej uniwersalne użyj (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

[aladin07]

no to w takim razie chyba jedynym sposobem bedzie

[HTML] pobierz, plaintext 
li{
height:40px;
display:table;
}
li label, li input{
margin:0 auto;
display:table-cell;
vertical-align:middle;
}
li input{
height: 30px;
width: 130px;
}
li label{
font: 10px;
width: 70px;
}
[HTML] pobierz, plaintext 

po prostu mslalem ze sa moze jakie bardziej eleganckie rozwiazania
no ale moze to wcale nie jest nieeleganckie:)