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

Jan.Tajovsky

Člen

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

Honza Bittner

Tvůrce

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.

Neaktivní uživatel

Tvůrce

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

Honza Bittner

Tvůrce

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.

Honza Bittner

Tvůrce

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.

Neaktivní uživatel

Tvůrce

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

Honza Bittner

Tvůrce

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.

Neaktivní uživatel

Tvůrce

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

Jan.Tajovsky

Člen

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