Zarovnanie v html

Programovacie jazyky, rady, poradňa...
weroro
Flash coder
Flash coder
Používateľov profilový obrázok
Príspevky: 3206
Registrovaný: 14 feb 2009, 22:34
Bydlisko: Bratislava
Kontaktovať používateľa:

Re: Zarovnanie v html

Príspevok od používateľa weroro »

Po rokoch si idem sám odpovedať na svoju otázku v prvom príspevku http://www.hojko.com/post1172875.html#p1172875 , keďže nebola zodpovedaná 100%.

Kód: Vybrať všetko

div {
    width: 100px;
    height: 100px;
    margin-left: -50px; /* minus polovica sirky */
    margin-top: -50px; /* minus polovica vysky */
    position: absolute;
    left: 50%;
    top: 50%;
    background-color: #00f;
}
Kontajner s pevnými rozmermi (v tomto prípade modrý štvorček 100x100 pixelov) bude vždy umiestnený presne v strede stránky horizontálne aj vertikálne.
Funguje aj v IE7.
fikotek
King
King
Používateľov profilový obrázok
Príspevky: 1618
Registrovaný: 21 dec 2004, 16:13
Bydlisko: Zamilovany :-)
Kontaktovať používateľa:

Re: Zarovnanie v html

Príspevok od používateľa fikotek »

Weroro, da se to udelat i takhle :-)

Kód: Vybrať všetko



.Center-Container {
  position: relative;
}

.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}


*****HERO*****
Guru wannabe
Guru wannabe
Používateľov profilový obrázok
Príspevky: 2446
Registrovaný: 08 máj 2006, 1:34

Re: Zarovnanie v html

Príspevok od používateľa *****HERO***** »

fikotek napísal:Weroro, da se to udelat i takhle :-)

Kód: Vybrať všetko



.Center-Container {
  position: relative;
}

.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}


overflow by mal byt skor visible, nie? a IE7 s tym bude mat aj tak problem


ja na tieto veci pouzivam tento tabulkovy pattern uz dlhe roky, nemusis sa ani starat o rozmery toho co chces vycentrovat a zlozito tam davat minusove marginy, jednoducho to vycentruje vsetko. slape to snad na vsetkom (od IE 5.5). ak mi ale nezalezi na starych IEckach, co dnes uz vobec nie, existuje milion inteligentnejsich rieseni.

Kód: Vybrať všetko

        
html,body{height:100%;overflow:hidden;padding:0;margin:0;}
.table_wrap{height: 100%;display: table;width: 100%;#position: relative}
.cell_wrap{display: table-cell;vertical-align: middle;#position:absolute;#top:50%;}
.container{position:relative;#position:relative;#top:-50%;width:1200px;height:500px;margin:0 auto;background:red;}

<body>
    <div class="table_wrap">
        <div class="cell_wrap">
            <div class="container">
                dmasdasnuidnasid
            </div>
        </div>
    </div>
</body>
fikotek
King
King
Používateľov profilový obrázok
Príspevky: 1618
Registrovaný: 21 dec 2004, 16:13
Bydlisko: Zamilovany :-)
Kontaktovať používateľa:

Re: Zarovnanie v html

Príspevok od používateľa fikotek »

Jo zpusobu je vice, zde je cely clanek :-)
http://coding.smashingmagazine.com/2013 ... ering-css/
Napísať odpoveď