Centriranje vsebine na sredino ekrana – vertikalno in horizontalno centriranje

Centriranje vsebine na sredino ekrana po horizontali in vertikali je lahko precej zapletena zadeva. Medtem, ko je centriranje po horizontali dokaj enostavno nam centriranje po vertikali povzroča sive lase, saj CSS funkcije, ki bi vsebino poravnala po vertikalni ni. Pomagati si moramo z nekaterimi drugimi značkami s katerimi dosežemo želeni efekt.

Vsebino najlažje centriramo, če ustvarimo DIV polje, ki mu določimo širino,  višino, pozicioniranje, odmike in »margin«. Za lažje predstavljanje  si bomo ogledali samo kodo.

Primer centriranja po horizontali in vertikali:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Centriranje vsebine na sredino ekrana</title>
<style type="text/css">
#center {
width:600px;
height:300px;
position:absolute;
top:50%;
left:50%;
margin:-150px 0 0 -300px;
border:1px solid black;
}
</style>
</head>
<body>

<div id="center">
Centriranje vsebine na sredino ekrana
</div>

</body>
</html>

Opis kode:

width:600px;  // Širina polja
height:300px;  // Višina polja
position:absolute;  // Pozicioniranje
top:50%;  // Odmik od zgornjega roba
left:50%;  // Odmik od sponjega roba
margin:-150px 0 0 -300px; // Margin, zgornji odmik za polovico višine polja, desno nič, spodaj nič in levo polovični odmik širine
border:1px solid black;  // Obroba, ni potrebna za delovanje

  • Borut

    Kaj pa v primeru da višina div-a ni fiksna?

    Odgovori
  • Dobro vprašanje. Ponavadi, ko je vsebina daljša od standardnih velikosti zaslona centriranje po višini ni potrebno. Če želimo imeti vseeno centrirano pozicijo, pa določimo samo zgornji in spodnji odmik (margin-top in margin-bottom). Pogoj je seveda zadostna količina vsebine, da na zaslonu dosežemo efekt centriranja.

    Odgovori

Komentiraj


*