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.)
#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.)
Vastaukset 3
Vanhimmat
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.
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ä.