Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
Pouze tento týden sleva až 80 % na e-learning týkající se C a C++. Zároveň využij akce až 80 % zdarma při nákupu e-learningu - více informací.
c++ week

Diskuze: Vycentrování na střed

Aktivity
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 3.3.2016 21:49
 
Odpovědět
3.3.2016 21:47
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 :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í
+1 bodů
Řešení problému
Nahoru Odpovědět
3.3.2016 23:20
Všechno jde naprogramovat, chce to jen čas a chuť...
Avatar
Aaron
Redaktor
Avatar
Odpovídá na vlastajuracka
Aaron: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
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
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
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
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.