Forum PHP.pl > Pionowe wyrównanie tekstu

Pomoc - Szukaj - Użytkownicy - Kalendarz

Forum PHP.pl > Forum > Po stronie przeglądarki

pojas

21.10.2007, 12:24:23

W jaki sposób ustawić pionowe wyrównanie tekstu w elemencie input?
Te zrzuty ekranów powinny wyjaśnić o co mi chodzi (chcę np. ustawić, żeby w każdej przeglądarce było jak w Operze)

Kod

[HTML] pobierz, plaintext 
<html>
<head>
    <style type="text/css">
 
        * {
            margin: 0;
            padding: 0;
 
            font-family: Verdana;
            font-size: 11px;
            color: #555555;
        }
 
        body {
            text-align: center;
 
            margin-top: 100px;
        }
 
 
 
 
        input {
            width: 300px;
            height: 150px;
 
            border: 1px solid #999999;
 
            text-align: center;
            vertical-align: middle;
        }
 
    </style>
</head>
<body>
 
    <form>
        Ala ma <input value="psa"> a pies ma smycz.
    </form>
 
</body>
</html>
[HTML] pobierz, plaintext

Z góry dzięki.

nevt

21.10.2007, 16:08:19

zamiast vertical-align

Kod

input
{
     ...
     line-height: ...;
     padding-top: ...;
}

i będzie ok w większości przeglądarek.

pojas

21.10.2007, 18:28:20

Kod

input
{
    /*  ...  */

    line-height: 10px;
    padding-top: 10px;

    /*  ...  */
}

W Operze jest inaczej niż w IE i FF - tekst jest obniżony o 10px od lini środka wysokości całego pola ( w IE i FF jest 10px od samej góry chyba liczone ). Jak to załatwić

.radex

21.10.2007, 18:45:11

w operze najlepszy jest sposób przedstawiony przez ciebie...

pojas

21.10.2007, 20:42:25

Czyli jak powinny wyglądać style? (działające wszędzie?) Chcę, żeby tekst był na środku całej wysokości.

.radex

22.10.2007, 07:39:27

raczej tak(na oko):

input
{
/* ... */

/* IE, FF itp. */
line-height: 10px;
padding-top: 10px;
/* Opera itp. */
vertical-align: middle;

/* ... */
}

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.