Vodič: kako centrirati element s CSS-jem

Zdravo,

danes vam bom na hitro pokazal kako enostavno centriramo kateri koli element.

1. primer

Imamo naslednjo kodo:

<div class="container primer-1">
 
  <div class="box">
    Živjo
  </div>
  
</div>

Uporabimo naslednjo kodo CSS:

.container.primer-1 {
  position: relative;
}
.container.primer-1 .box {
  position: absolute; /* Postavi div absolutno glede na svojega starša */
  left: 50%; /* Postavi element 50% širine diva .container desno */
  margin-left: -150px; /* Polovica širine diva (Primer: če bi bla širina diva .box 600px, bi uporabili margin-left: -300px;) */

}

Najprej postavimo element v katerem bo naš željen element centriran v relativno, potem naš .box pozicioniramo absolutno glede na starša (.container), ga odmaknemo od levega roba za 50% in mu določimo margin-left negativno njegovi širini (V mojem primeru je širina 300px, se pravi -150px)

Glej primer 1: Codepen.io

2. Primer

Imamo naslednjo kodo:

<div class="container primer-2">
 
  <div class="box">
    Živjo
  </div>
  
 </div>

Uporabimo CSS kodo:

.container.primer-2 {
  text-align: center; /* Centriramo text */
}

.container.primer-2 .box  {
  display: inline-block; /* Prikažemo div kot običajen text */
}

Najprej postavimo ves text v našem kontejnerju v center, prikažemo naš .box kot običajen text, voila!

Glej primer 2: Codepen.io

3. primer

Imamo naslednjo kodo:

<div class="container primer-3">
 
  <div class="box">
    Živjo
  </div>
  
 </div>

Uporabimo CSS:

.container.primer-3 .box  {
  margin: 0 auto;
  /* Možnost 2, ki naredi enako je:
     margin-left: auto;
     margin-right: auto;
  */
}

Divu .box določimo margin levo in desno auto, kar pomeni da CSS sam izračuna potrebno vrednost da postavi div v sredino. Ta način ne deluje če je div pozicioniran absoluto, ali pa če nima določene širine in višine!

Glej primer 3: Codepen.io

4. primer

Imamo naslednjo kodo:

<div class="container primer-4">
 
  <div class="box">
    Živjo
  </div>
  
 </div>

Uporabimo CSS:

.container.primer-4 {
  position: relative;
}

.container.primer-4 .box  {
  position: absolute; /* Div absolutno glede na starša */
  left: 50%; /* Odmik od leve strani 50% */
  top: 50%; /* Odmik od zgornjega roba 50% */
  transform: translate(-50%, -50%); /* z CSS3 premaknemo za 50% levo in gor */
  -webkit-transform: translate(-50%, -50%); /* z CSS3 premaknemo za 50% levo in gor */
  -moz-transform: translate(-50%, -50%); /* z CSS3 premaknemo za 50% levo in gor */
}

Spet moramo najprej določiti pozicijo okvirju (.container) na rekativno, potem določimo pozicijo divu .box absolutno na starša, ga premaknemo za 50% od zgornjega in 50% od levega robu. Uporabimo CSS3 vrednost transform in ga translatamo (premaknemo) za -50% gor in -50% v levo.

Glej primer 5: Codepen.io


Oglejte si vse primere v akciji: Codepen.io

Res pohvalno in lepo od tebe za tutorial! Gotovo boš komu pomagal s tem, se pa ob tem sprašujem, če nebi bilo smotrno na slo-techu uvest kakšno rubriko s tutoriali (seveda z res uporabniki in kvalitetnimi, požegnanimi s strani osebja ST), ker bi se zaradi tega precej manj spraševalo ena in iste stvari na forumu, malce bi se angažiralo še community in navsezadnje bi to zagotovo pomenilo še večjo dodano vrednost slo-techa in navsezadnje tudi večji obisk.

Precej je takšnih, ki niti na znajo ali se jim ne da uporabljat googla, da najdejo kakšno stvar, za njih ni opravičila. Ampak ko pa vidim nekatere, ki jim angleščina resnično ne gre, pa lahko v slovenščini pišejo v google marsikaj pa v slovenščini ne bo zadetka, kar je še en razlog več, da bi prišli razni tutoriali prav.

Je pa tudi res, da če nima človek volje se toliko potruditi, da osvoji osnovno terminilogijo, verjetno tudi nima prave žalje, da bi se nekaj naučil.

@Invictus, to je povsem jasno, ampak še vseeno obstajajo takšni. Poznam programerje samouke od Jave pa do strojništva, ki nimajo ne resne izobrazbe ne pojma v angleščini pa so na svojem področju res uspešni. Do cilja pridejo ampak malce težje, je pa recimo eden od njiju veliko bolj vešč nemščine, kar niti ni tako čudno za podeželje, če malce pomislimo na naše babice in dedke... Se pa sicer povsem strinjam, je pa ves point čisto drugje, da bi res kvalitetne tutoriale z veseljem ljudje pogledali, pa nima to vese z uteho tistim, ki se nočejo ali ne znajo naučiti angleško.

Hvala vsem za nasvete, bom pri naslednjem vodiču upošteval. Sem pa tudi sam za to, da se odpre nekakšna rubrika z različnimi vodiči v slovenščini.

Mislim da bi se dalo z vsemi primeri tudi vertikalno centrirat, recimo pri absolutnem bi dal margin-top: -(višina/2)px; Pri translate primeru se že samo od sebe poravna tudi vertikalno.