Pelkkä tekstin keskitys: text-align
Lohko keskitetään vaakasuunnassa: max-width ja margin auto
Logo
CSS
.text-align { text-align: center; } /* Vaakakeskitys ilman flexiä tai gridiä: lohkolle annetaan leveys ja automaattiset sivumarginaalit. */ .vaaka { max-width: 20em; margin-left: auto; margin-right: auto; border: 1px solid #23201c; padding: 0.5em; } /* Keskitys molemmissa suunnissa gridillä */ .ruudukko { display: grid; place-items: center; height: 10em; width: 10em; border: 1px solid #b3261e; } /* Keskitys molemmissa suunnissa flexboxilla. HUOM: flex-direction: center EI ole olemassa. Keskitys syntyy ominaisuuksista align-items ja justify-content. */ .ulompi { display: flex; align-items: center; justify-content: center; width: 20em; height: 15em; border: 5px solid #23201c; }
HTML
<div class="text-align">Pelkkä tekstin keskitys: text-align</div> <div class="vaaka">Lohko keskitetään vaakasuunnassa: max-width ja margin auto</div> <div class="ulompi"> <div class="ruudukko"> <figure class="text-align"> <img src="https://appro.mit.jyu.fi/images/appro2_p.png" alt="" /> <figcaption>Logo</figcaption> </figure> </div> </div>
Javascript
Konsoli
