Avatar
vlastajuracka:

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. března 21:49
 
Odpovědět 3. března 21:47
Avatar
Martin Štěpánek (Enormyk):

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. března 23:15
Nesnáším, když někdo u if nepoužívá {}, byť se jedná o jeden řádek.
Avatar
Martin Štěpánek (Enormyk):

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  +1 3. března 23:20
Nesnáším, když někdo u if nepoužívá {}, byť se jedná o jeden řádek.
Avatar
Fredep
Redaktor
Avatar
Odpovídá na vlastajuracka
Fredep:

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  +1 4. března 8:18
Týmová práce je důležitá proto, aby bylo možno obvinit z neúspěchu někoho jiného.
Avatar
Odpovídá na Martin Štěpánek (Enormyk)
vlastajuracka:

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

 
Nahoru Odpovědět 4. března 10:23
Avatar
Tomáš123
Člen
Avatar
Odpovídá na vlastajuracka
Tomáš123:

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. března 14:27
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Odpovídá na Tomáš123
Martin Štěpánek (Enormyk):

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

Nahoru Odpovědět 4. března 16:10
Nesnáším, když někdo u if nepoužívá {}, byť se jedná o jeden řádek.
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Martin Štěpánek (Enormyk)
Tomáš123:

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. března 18:51
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
joci
Člen
Avatar
Odpovídá na vlastajuracka
joci:

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

Nahoru Odpovědět 4. března 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.