vertical-align w polu input

vertical-align w polu input

Brick Zobacz profil	27.10.2009, 19:21:07 Post #1
Grupa: Zarejestrowani Postów: 107 Pomógł: 9 Dołączył: 16.02.2004 Skąd: Kraków Ostrzeżenie: (0%)	Czy ktoś ma sposób na ustawienie pionowe tekstu w polu input? Przykład [HTML] pobierz, plaintext <input type=text style="height:35px; width:100px;" value="Tutaj tekst"> [HTML] pobierz, plaintext FF i IE wyświetla wpisany tekst u góry, Opera na środku. vertical-align:middle czy baseline nie działa. padding-top - działa i przesuwa tekst w dół ale w Operze wtedy tekst jest już na dole tego pola. Na sieci znalazłem też pomysły z line-height ale nie działa. -------------------- Wszystko należy robić najprościej jak się da, ale nie prościej Albert Einstein

t4keda Zobacz profil	27.10.2009, 19:34:28 Post #2
Grupa: Zarejestrowani Postów: 57 Pomógł: 10 Dołączył: 14.10.2009 Ostrzeżenie: (0%)	Może da się to obejść przez coś takiego: [HTML] pobierz, plaintext <input type="text" style="height:15px; width:100px; padding: 5px 0px 5px 0px;" value="Tutaj tekst"> [HTML] pobierz, plaintext Ustawić niezbyt wysokie pole (tak żeby tekst się mieścił) i rozepchać je paddingiem? Ten post edytował t4keda 27.10.2009, 19:35:11

Brick Zobacz profil	29.10.2009, 08:27:41 Post #3
Grupa: Zarejestrowani Postów: 107 Pomógł: 9 Dołączył: 16.02.2004 Skąd: Kraków Ostrzeżenie: (0%)	Niestety FF w takim wypadku w ogóle nie pokazuje tekstu. Padding nie rozpycha pola input tylko sam tekst przesuwa w dół, poza pole input. Chyba nie da się tego zrobić żeby było ok we wszystkich przeglądarkach. -------------------- Wszystko należy robić najprościej jak się da, ale nie prościej Albert Einstein

t4keda Zobacz profil	29.10.2009, 13:49:09 Post #4
Grupa: Zarejestrowani Postów: 57 Pomógł: 10 Dołączył: 14.10.2009 Ostrzeżenie: (0%)	Ostatnio też musiałem wyśrodkować tekst w input i zrobiłem coś takiego: [HTML] pobierz, plaintext <input class="poletxt" type="text" value="Hasło"/> [HTML] pobierz, plaintext [CSS] pobierz, plaintext input.poletxt { background-color:#171717; border:2px solid #A8A8A8; color:#E8E8E8; font-family:tahoma,sans-serif; font-size:11px; height:15px; padding:5px 0; text-align:center; vertical-align:middle; [CSS] pobierz, plaintext Tu możesz zobaczyć jak to wyszło: http://t4keda.cba.pl/jscript/contrast_css/ W moim FF3.5.3 ja widzę dosyć dobrze ustawiony tekst, więc to działa.

Brick Zobacz profil	29.10.2009, 18:59:50 Post #5
Grupa: Zarejestrowani Postów: 107 Pomógł: 9 Dołączył: 16.02.2004 Skąd: Kraków Ostrzeżenie: (0%)	Dzięki za pomoc (klikam "pomógł") Pomału doszedłem o co chodzi za pomocą twojego przykładu. vertical-align:middle - niestety nie działa tak jak trzeba. W FF i Opera bez różnicy czy jest czy nie ma, za to w IE środkuje napis ten obok pola input. IE jak zwykle luźno wszystko traktuje ;) Przykład poniżej działa ok: [HTML] pobierz, plaintext input.poletxt { height: 17px; padding: 5px 0px 5px 0px; vertical-align:middle; } <p>Login: <input class="poletxt" type="text" value="Login" /></p> [HTML] pobierz, plaintext Ale UWAGA! DOCTYPE musi być XHTML czyli <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> Gdy damy HTML to nie działa. Tutaj jest przykład działający, może komuś się przyda -------------------- Wszystko należy robić najprościej jak się da, ale nie prościej Albert Einstein

t4keda Zobacz profil	29.10.2009, 22:36:17 Post #6
Grupa: Zarejestrowani Postów: 57 Pomógł: 10 Dołączył: 14.10.2009 Ostrzeżenie: (0%)	vertical-align, jeśli dobrze pamiętam to nie środkuje tekstu względem elementu, ale element względem tekstu. Fakt, że jeśli masz jedną linijkę tekstu, która jest niższa od elementu któremu nadałeś vertical-align, to wygląda to jakby tekst przesuwany. Ale zobacz co się stanie jeśli będziesz miał długi tekst (kilka linijek) i dasz vertical-align (middle, top, bottom) obrazkowi.

1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)

0 Zarejestrowanych:

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Aktualny czas: 27.06.2025 - 19:04

Hosting zapewnia