Nové výhodné předplatné namísto kreditů je tu! Více informací. Upravili jsme také naše provozní podmínky.
NOVINKA: Staň se datovým analytikem a získej jistotu práce, lepší plat a nové kariérní možnosti. Více informací:
Avatar
Jan.Tajovsky
Člen
Avatar
Jan.Tajovsky:13.7.2014 14:29

Zdravím všechny web-designéry,

chtěl bych se zeptat, jak je možné vycentrovat div přímo do prostředka obrazovky, tedy vertikálně i horizontálně.

Vím, že to byl dříve problém ale snad se časy už zlepšily...

Tak díky všem za každou odpověď.

Zdar!!!

 
Odpovědět
13.7.2014 14:29
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Jan.Tajovsky
Honza Bittner:13.7.2014 14:44

Mám jednoduché řešení, které však funguje pouze v CSS3.

(mám to napsané v SASSu)

@mixin vendor-prefix($name, $value){
   -webkit-#{$name}: #{$value};
      -moz-#{$name}: #{$value};
       -ms-#{$name}: #{$value};
        -o-#{$name}: #{$value};
           #{$name}: #{$value};
}

@mixin vertical-center($value: 50%){
   position: relative;
   top: $value;
   @include vendor-prefix(transform, translateY(-50%));
}

@mixin horizontal-center($value: 50%){
   position: relative;
   left: $value;
   @include vendor-prefix(transform, translateX(-50%));
}
Nahoru Odpovědět
13.7.2014 14:44
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Jan.Tajovsky
Neaktivní uživatel:13.7.2014 14:49

Ja to riešim pomocou margin: 0 auto; pre horizontálne centrovanie a:

// vertikalne centrovanie
function getWindowHeight() {
                        var windowHeight = 0;
                        if (typeof(window.innerHeight) == 'number') {
                                windowHeight = window.innerHeight;
                        }
                        else {
                                if (document.documentElement && document.documentElement.clientHeight) {
                                        windowHeight = document.documentElement.clientHeight;
                                }
                                else {
                                        if (document.body && document.body.clientHeight) {
                                                windowHeight = document.body.clientHeight;
                                        }
                                }
                        }
                        return windowHeight;
                }
                function setContent() {
                        if (document.getElementById) {
                                var windowHeight = getWindowHeight();
                                if (windowHeight > 0) {
                                        var contentElement = document.getElementById("home");
                                        var contentHeight = contentElement.offsetHeight;
                                        if (windowHeight - contentHeight > 0) {
                                                contentElement.style.position = 'relative';
                                                contentElement.style.top = ((windowHeight / 2) - (contentHeight / 2)) + 'px';
                                        }
                                        else {
                                                contentElement.style.position = 'static';
                                        }
                                }
                        }
                }
                window.onload = function() {
                        setContent();
                }
                window.onresize = function() {
                        setContent();
                }

pre vertikálne kde za "home" dosadis element ktory len chces

Nahoru Odpovědět
13.7.2014 14:49
Neaktivní uživatelský účet
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Jan.Tajovsky
Honza Bittner:13.7.2014 14:51

Jinak se to dá udělat také IMHO tak, že 1 element nastavíš na left: 50% a elementům vevnitř tohoto nastavíš nějaký float + right: 50%...

tedy nějak :

.VNEJSI
{
  position: relative;
  display: inline-block;
  left: 50%
}

.VNITRNI
{
  position: relative;
  float: left;
  right: 50%;
}

Avšak nevím, jestli to bude fungovat na 100%. To pak někdy musím prozkoušet, ale mělo by to fungovat všude... :)

Nahoru Odpovědět
13.7.2014 14:51
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Honza Bittner:13.7.2014 14:52

To je špatné řešení, do toho by jsi vůbec JS tahat neměl.

Nahoru Odpovědět
13.7.2014 14:52
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Honza Bittner
Neaktivní uživatel:13.7.2014 14:53

Ja som to mal takú malú pomôcku pokiaľ som nepoužíval Sass, kde sa to samozrejme dá viacerými spôsobmi a lepšie

Nahoru Odpovědět
13.7.2014 14:53
Neaktivní uživatelský účet
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Honza Bittner:13.7.2014 14:55

Tak ono se to moje řešení (1) - to ti vycentruje cokoli v čemkoli (jen CSS3) - dá přepsat do čistého CSS, to není žádný problém. ;)

Nahoru Odpovědět
13.7.2014 14:55
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Honza Bittner
Neaktivní uživatel:13.7.2014 14:59

Dá ale v čistom CSS je to také pre mňa dosť škaredé. Neviem prečo sa mi to nepáči.

Nahoru Odpovědět
13.7.2014 14:59
Neaktivní uživatelský účet
Avatar
Jan.Tajovsky
Člen
Avatar
Odpovídá na Honza Bittner
Jan.Tajovsky:14.7.2014 21:04

Zdravím,

nemohu rozchodit tu ukázku v SASS(o SASS slyším poprvé) ale jakse zdá, druhá ukázka mi něják také nefunguje.
http://s23.postimg.org/…rizontal.png
http://pastebin.com/B7undewS

Nevím jestli jsem se vyjádřil správně ale chtěl bych docílit vertikální i horizontální zarovnání, které by vypadalo asi takto:
http://s30.postimg.org/…rizontal.png
http://pastebin.com/dw0SBSLm

 
Nahoru Odpovědět
14.7.2014 21:04
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 9 zpráv z 9.