Avatar
Jan.Tajovsky
Člen
Avatar
Jan.Tajovsky:

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:

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
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Samuel Illo
Redaktor
Avatar
Odpovídá na Jan.Tajovsky
Samuel Illo :

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; lamka02sk(zavináč)samuelillo.com, www.point.samuelillo.com, www.csgorig.eu
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Jan.Tajovsky
Honza Bittner:

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
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Samuel Illo
Honza Bittner:

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

Nahoru Odpovědět 13.7.2014 14:52
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Samuel Illo
Redaktor
Avatar
Odpovídá na Honza Bittner
Samuel Illo :

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; lamka02sk(zavináč)samuelillo.com, www.point.samuelillo.com, www.csgorig.eu
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Samuel Illo
Honza Bittner:

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
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Samuel Illo
Redaktor
Avatar
Odpovídá na Honza Bittner
Samuel Illo :

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; lamka02sk(zavináč)samuelillo.com, www.point.samuelillo.com, www.csgorig.eu
Avatar
Jan.Tajovsky
Člen
Avatar
Odpovídá na Honza Bittner
Jan.Tajovsky:

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.