keskiviikkona, toukokuuta 18, 2016

Lohkon keskitys CSS:llä

Eli jos halutaan keskittää jokin lohko joka näkyy selaimessa niin että se skaalautuu, tulee tehdä seuraava CSS tiedostoon tai header tagin sisään html tiedostoon. Ohessa siis esimerkki mahdollisesta rakenteesta.

 <div class="container">  
 <div class="header">  
 <div class="center">  
 <p></p>  
 </div>  
 </div>  
 </div>  

Seuraavaksi html5 koodiin pitää lisätä seuraavan lainen div-lohko.

 .container{  
   max-height: 1260px !important;  
   margin: auto;  
   padding: 10px;  
   margin-top: 60px;  
   max-width: 960px;  
 }  
 .center{  
   margin: auto;  
   padding: 10px;  
 }  

Nyt testi ajossa tulisi näkyä seuraavaa:










Saat testi tiedoston täältä.

Ei kommentteja: