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

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

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

Naučíme tě pracovat na home-office.

Zjistit více...

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.

Nejčastěji vyhledáváné

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