Válí se ti projekty v šuplíku? Dostaň je mezi lidi a získej cool tričko a body na profi IT kurzy v soutěži ITnetwork summer 2017!
Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)

Diskuze: Vertikální a horizontální center

HTML a CSS HTML a CSS Vertikální a horizontální center American English version English version

Aktivity (1)
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
Redaktor
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
Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a zeptat na cokoli se mě můžeš na https://github.com/HoBi/...
Avatar
Samuel Illo
Redaktor
Avatar
Odpovídá na Jan.Tajovsky
Samuel Illo :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  -1 13.7.2014 14:49
www.samuelillo.com | www.github.com/lamka02sk
Avatar
Honza Bittner
Redaktor
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
Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a zeptat na cokoli se mě můžeš na https://github.com/HoBi/...
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Samuel Illo
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
Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a zeptat na cokoli se mě můžeš na https://github.com/HoBi/...
Avatar
Samuel Illo
Redaktor
Avatar
Odpovídá na Honza Bittner
Samuel Illo :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
www.samuelillo.com | www.github.com/lamka02sk
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Samuel Illo
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
Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a zeptat na cokoli se mě můžeš na https://github.com/HoBi/...
Avatar
Samuel Illo
Redaktor
Avatar
Odpovídá na Honza Bittner
Samuel Illo :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
www.samuelillo.com | www.github.com/lamka02sk
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.