Olen yrittänyt tehdä diviä, jonka vasemmalla puolella on kuva ja kuvan oikealla puolella taulukoitua tekstiä. Tarkoitus olisi saada kuva pystysuunnassa keskelle. Olen käyttänyt tähän vertical-alignia, mutta mitään ei ole tapahtunut. Tässä koodia (kuvani paikalle muutettu wikipedian kuva):
#new_photo {
font: normal 16px Arial;
padding: 0;
border: 1px black solid;
overflow: auto;
vertical-align: middle;
}
.bigger {
font: normal 18px arial;
}
img {
float: left;
margin-bottom: 10px;
vertical-align: middle;
}
table {
border: 0px black solid;
vertical-align: middle;
}
td {
vertical-align: top;
border: 0px black solid;
padding: 15px;
}
h2 {
padding: 0;
margin: 0;
background: black;
color: white;
Uusin kuva
Kuvan otti: Ville Virtanen
Kuvausaika: torstaina 22.12.2006 klo 16.35
Kuvauspaikka: Kaivopuisto, Helsinki, Suomi
Eli onko koodissa joku vikana, vai mistä ongelma johtuu? (Kokeile kopioida koodi esim. muistioon ja avaa se selaimessa ja suurenna tekstin koko valtavan suureksi. Kuva jää divin yläreunaan, vaikka ei pitäisi.)
vertical-align ei toimi
3
272
Vastaukset
- foxytin
Vertical-align ei toimi div-elementissä. Se toimii pääsääntöisesti vain taulukon soluissa.
CSS:llä olet määrittänyt kuvalle padding-bottomia 10px verran. Sinänsä turha määritys.
Onko divissä näytettävä kuva aina samankokoinen? Jos on, niin määritä img-tagille esim. padding-top attribuutilla oikea kohta.- Niilo Noviisi
Jaa että sellaista. Ongelmana on, että tekstin kokoa suurennettaessa kuva näyttää typerältä yläreunassa, se olisi parempi keskellä. Kannattaisiko kuva laittaa taulukon soluun, jotta sen saisi toimimaan?
Todellisuudessa div on paljon kapeampi kuin tuon esimerkkikoodinpätkän, joten tekstin kokoa ei tarvitse suurentaa edes paljon, kun tulee jo esteettisyysongelmia.
Kuva on aina samankokoinen, mutta padding-top ei auta, sillä sen paikka pitäisi määrittää suhteellisesti.
"CSS:llä olet määrittänyt kuvalle padding-bottomia 10px verran. Sinänsä turha määritys. "
Totta, täytyypä ottaa pois. - foxytin
Niilo Noviisi kirjoitti:
Jaa että sellaista. Ongelmana on, että tekstin kokoa suurennettaessa kuva näyttää typerältä yläreunassa, se olisi parempi keskellä. Kannattaisiko kuva laittaa taulukon soluun, jotta sen saisi toimimaan?
Todellisuudessa div on paljon kapeampi kuin tuon esimerkkikoodinpätkän, joten tekstin kokoa ei tarvitse suurentaa edes paljon, kun tulee jo esteettisyysongelmia.
Kuva on aina samankokoinen, mutta padding-top ei auta, sillä sen paikka pitäisi määrittää suhteellisesti.
"CSS:llä olet määrittänyt kuvalle padding-bottomia 10px verran. Sinänsä turha määritys. "
Totta, täytyypä ottaa pois.Toki sen voi taulukkoon laittaa, jos haluaa. En yleensä taulukoita suosittele, mutta kyseessä on nyt taulukkomuotoinen data, joten semantiikka virheitäkään ei tule.
Jos halutaan saada kaikki skaalautumaan (paitsi kuva, jonka kokoa ei voi muuttaa. tai voi mutta ei oikein hyvä ole) tulisi käyttää suhteellisia mittoja. Pikseli (px) on absoluuttinen mitta, eikä siis muutu miksikään.
Sen sijaan tekemällä koko sivusto ja kaikki sen osat esimerkiksi "em" mittayksiköllä saadaan sivu skaalautumaan kokonaisuudessaan. Täten jos käyttäjä haluaa suurentaa tekstiä, hän tekstin sijaan suurentaa koko sivua. Tällöin myös padding-top-attribuutin arvo pysyy aina samana ja kuva keskellä.
Ketjusta on poistettu 0 sääntöjenvastaista viestiä.
Luetuimmat keskustelut
Eroa Orpo! Orpo eroa!
Suomen kansa vaatii viimein ottamaan meidät huomioon, eikä vain ulkomaalaisia pääomasijoittajia. Koska täällä Suomessa1472896SDP esti Suomen luisumisen kohti 1984 Orwell -yhteiskuntaa
Äärioikeistohallitus olisi halunnut Stasin tapaan mikrofonit jokaisen kansalaisen kotiin, mutta SDP esti tuon siirtymän591882Odottavan aika on pitkä, Lindtmanin hallitusta tule jo!
Eilisen perusteella nykyinen hallitus epäonnistui kaikissa vaalilupauksissaan, joten olemme ansainneet uudet eduskuntava981848Naiset ei halua kilttejä miehiä
Näin se vaan on..jos olet ilman tatskoja, et rähjää, sinulla ei ole rikosrekisteriä, olet liian kiltti, et sano pahasti,3031799Wille Rydman (ps) osoitti olevansa kommunisti
Hän toistaa Neuvostoliiton virhettä. Haluaa pitää palveula yllä maksoi mitä maksoi, vaikkei ole maksavia asiakkaita. --201650Ainoastaan 10 aloitusta ekasivulla yhdeltä henkilöltä
Kovasti on vaivaa, ei oo muuta tekemistä tällä henkilöllä päivisin ja öisin... Taas märehtimistä ja samaa jankutusta.291349Seiska: Helmi Loukasmäki paljastaa - Näin Danny ja Helmi tapasivat
Helmi Loukasmäki, 25, ja Ilkka Danny Lipsanen, 83, ovat seurattuja julkkiksia. Mutta tiesitkö, miten he tapasivat? Lue291332Menettämisestä
Ajatteletko, että olet menettänyt mahdollisuutesi häneen? Osaatko sanoa miksi niin tapahtui?1181233Kiinteistökauppoja
Onko totta ettö haapaveden kaupunki on ostanut vanhan kesoilin kiinteistön? Kuulemma siihen muuttaa autokorjaamo vanhan411102RAAMATULLINEN KASTE ON SAPATTI-LAUANTAI, EI SUNNUNTAI
Aihe, josta ehkä on eniten kiistaa kristillisten seurakuntien piirissä, on kysymys oikeasta raamatullisesta pyhäpäivästä4041052