Miten saisin kuvan samalle tasolle formin input kentän kanssa.
Niin että kuva olisi samalla linjalla sen kanssa, eikä vähän ylä tai alapuolella?
Kuva on vähän pienempi kuin input kentän korkeus (oletuksena)
(kuva) [ I N P U T ]
Niin että kuva olisi samalla linjalla sen kanssa, eikä vähän ylä tai alapuolella?
Kuva on vähän pienempi kuin input kentän korkeus (oletuksena)
(kuva) [ I N P U T ]
Vastaukset 4
Vanhimmat
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;}
designissä!
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;}