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
270
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
Riikan kukkaronnyöri on umpisolmussa
Kulutus ei lähde liikkeelle, koska kansalaiset eivät usko, että: – työpaikka säilyy – tulot eivät romahda – talous ei h52732Jos vedetään mutkat suoraksi?
Niin kumpaan ryhmään kuulut? A) Niihin, jotka menevät edellä ja tekevät? Vai B) Niihin, jotka kulkevat perässä ja ar1062571Tanskan malli perustuu korkeaan ansioturvaan
Ja vahvoihin työllisyys- ja kotoutumispalveluihin. Suomessa Riikka on leikannut juuri näitä: palkkatukea, työttömyysturv142276Vain vasemmistolaiset ovat aitoja suomalaisia
Esimerkiksi persut ovat ulkomaalaisen pääomasijoittajan edunvalvojia, eivät auta köyhiä suomalaisia.451870- 321453
Anteeksipyyntöni
Jätän tähän anteeksipyyntöni sinulle, koska en voi sanoa sitä missään muuallakaan. Pyydän anteeksi, jos purkamani tuska141443- 1761155
Sydämeni valtiaalle
En täältä aio asioita kysellä. Haluan tuoda tiedoksesi, että pohjimmiltani en ihmisiä tahdo satuttaa ja ajattelen muiden1011144Persu ajoi autoa
Ajoi lapsen yli https://www.iltalehti.fi/kotimaa/a/597a7468-3d1d-455e-bed2-21c1efc31ac1201053Oletko tyytyväinen
Tämän hetkiseen tilanteeseenne? Odotatko, että lähennytte vai yritätkö päästä yli ja eteenpäin?81948