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
vlastajuracka
Člen
Avatar
vlastajuracka:3.3.2016 21:47

Vím že je to dost probírané téma ale nikde jsem nenašel smysluplnou odpověď mám stránku width: 100% a height: 1200px a chtěl bych do prostřed(vertikálně i horizontálně) zarovnat div s velikostí height: 800px a width: 70% a okrajema.... Moc všem děkuju za pomoc a čim lehčí tím lepší :)

Editováno
 
Odpovědět
3.3.2016 21:47
Avatar
Martin Štěpánek
Tvůrce
Avatar
Martin Štěpánek :3.3.2016 23:15

Pokud znáš tyto rozměry melo by stačit nastavit divu:

padding-left: 15%;
padding-right: 15%;
padding-top: 200px:
padding-bottom: 200px;

Samozřejmě to můžeš napsat na jeden řádek a ne to takto rozepisovat, to je jen pro představu. :-)

Nahoru Odpovědět
3.3.2016 23:15
Všechno jde naprogramovat, chce to jen čas a chuť...
Avatar
Martin Štěpánek
Tvůrce
Avatar
Martin Štěpánek :3.3.2016 23:20

Oprava:

margin-left: 15%;
margin-right: 15%;
margin-top: 200px:
margin-bottom: 200px;

A ty okraje si od toho popřípadě odečti ;-)

Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
Nahoru Odpovědět
3.3.2016 23:20
Všechno jde naprogramovat, chce to jen čas a chuť...
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na vlastajuracka
Neaktivní uživatel:4.3.2016 8:18

Ahoj, pokud tě to zajímá více obecně, doporučuji https://css-tricks.com/…the-unknown/

<div class="something-semantic">
   <div class="something-else-semantic">
       Uprostřed stránky.
   </div>
</div>

Příslušné CSS:

.something-semantic {
  display: table;
  width: 100%;
}
.something-else-semantic {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
Nahoru Odpovědět
4.3.2016 8:18
Neaktivní uživatelský účet
Avatar
vlastajuracka
Člen
Avatar
Odpovídá na Martin Štěpánek
vlastajuracka:4.3.2016 10:23

Díky všem za komentáře :) tvoje je nejednoduší :)

 
Nahoru Odpovědět
4.3.2016 10:23
Avatar
Tomáš123
Člen
Avatar
Odpovídá na vlastajuracka
Tomáš123:4.3.2016 14:27

Enormykovo riešenie nie je úplne dokonalé, ak bude výška väčšia ako 1200px blok nebude v strede.

Fredepovo riešenie nefunguje, lebo obalový prvok nemá nastavenú (100%) výšku.

Ak poznáš rozmery, ide použiť u centrovaného prvku niečo takéto:

.center {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: -400px; /*Polovica výšky*/
        margin-left: -300px; /*polovica šírky*/
}

Percentuálne hodnoty ale v tomto zápise nefungujú.

Článok o vertikálnom centrovaní: http://www.jakpsatweb.cz/…trovani.html

Nahoru Odpovědět
4.3.2016 14:27
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Martin Štěpánek
Tvůrce
Avatar
Odpovídá na Tomáš123
Martin Štěpánek :4.3.2016 16:10

Právě proto jsem napsal, že to funguje, jen když znáš rozměry ;-)

Nahoru Odpovědět
4.3.2016 16:10
Všechno jde naprogramovat, chce to jen čas a chuť...
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Martin Štěpánek
Tomáš123:4.3.2016 18:51

Pardón, nenapísal som to jasne. Element bude odsadený 200px zhora bez ohľadu na to, aká bude výška obrazovky, čo je trochu nevhodné. Väčšine sa to zobrazí zle.

Nefunkčnými percentuálnymi rozmermi vo svojom návrhu riešenia som myslel nefunkčnosť riešenia. -50% sa normálne aplikuje, ale iba vráti prvok tam, kde bol pred odsunutím.

Nahoru Odpovědět
4.3.2016 18:51
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
joci
Člen
Avatar
Odpovídá na vlastajuracka
joci:4.3.2016 19:47

Čo tak vyskúšať flexbox https://css-tricks.com/…-to-flexbox/ ktorý je presne na to určený.

Nahoru Odpovědět
4.3.2016 19:47
Svet patrí tím, ktorí sa neposerú.
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.