piccolo form con immagine

**dacanal** · 13-06-2011, 16:17

Salve a tutti,
quello che vorrei è una immagine, seguita da una frase, seguita da un campo teso, seguito da un button : il tutto su una riga.

Ho provato così:

codice:

<html>
    <head>
        <style type="text/css">
            img{
                float:left;
                height: 50px;
                width: 50px;
            }
            form{
                float:left;
                height:50px;
                vertical-align:middle;
            }
            #divLabel{
                text-align:center;
                height:50px;
                width:150px;
                float:left;
            }
        </style>

    </head>
    <body>
        [img]img.png[/img]
        <div id="divLabel">Qualche testo breve</div>
        <form action="" >
            <input type="text" />
            <input type="button" />
        </form>
    </body>
</html>

Il problema è che non riesco ad allineare l'immagine con il resto: ad esempio la frase compare in alto e non a metà altezza dellìimmagine. Idem per gli elementi del form...

Potete aiutarmi ?

Ciao

**dacanal** · 13-06-2011, 17:57

ahah, risolto grazie alla parolina magica inline-block!

ecco la soluzione (se può servire a qualcuno) :

codice:

<html>
    <head>
        <style type="text/css">
            #container{
                vertical-align:baseline;
            }
            img{
                height: 50px;
                width: 50px;
                vertical-align:middle;
                display:inline;
            }
            form{
                vertical-align:middle;
                display:inline;
            }
            #divLabel{
                text-align:center;
                vertical-align:middle;
                width:150px;
                display:inline-block;
            }
        </style>

    </head>
    <body>
        <div id="container">
            [img]img.png[/img]
            
            <form action="" >
                <label id="divLabel">Qualche testo</label>
                <input type="text" />
                <input type="button" />
            </form>
        </div>
    </body>
</html>

Discussione: piccolo form con immagine

Strumenti discussione

Ricerca discussione

Visualizza

piccolo form con immagine

Permessi di invio