jutska

Toimivin ratkaisu on ryhmitellä formin eri osat taulukkoon, kuva omaan soluunsa ja input-kenttä omaansa. Lopuksi vain css:llä määrittelee vertikaalisen asettelun keskitetyksi.

Esim näin:

otsikko


td.keskitys {vertical-align: middle;}

Merkkaukseen esim.



ja CSS-koodiin

.kuvakentta * { vertical-align: bottom; }

Tuo vertical-align on sen verran kiero, että piti ihan omasta kirjastani ("CSS-tyylit", s. 175 - 177) luntata, miten se menikään. Se vaikuttaa vain ns. sisäelementteihin (tekstitason elementteihin) eikä periydy, joten sen asettaminen div-elementille ei vaikuta mitään. Yllä olevassa se sen sijaan asetetaan jokaiselle elementille, joka on tässä käytetyn div-elementin sisällä, eli käytännössä img- ja input-elementille.

   
   .inputti{height: 50px; width: 300px; margin: 5px;}
   .inputti img{width: 50px; height: 50px; float: left;}