Diskuze: Vycentrování na střed

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

Aktivity

vlastajuracka

Člen

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

Martin Štěpánek

Tvůrce

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ť...

Martin Štěpánek

Tvůrce

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č

Nahoru Odpovědět

3.3.2016 23:20

Všechno jde naprogramovat, chce to jen čas a chuť...

Neaktivní uživatel

Tvůrce

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

vlastajuracka

Člen

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

Tomáš123

Člen

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.

Martin Štěpánek

Tvůrce

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ť...

Tomáš123

Člen

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.

joci

Člen

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.

Nejčastěji vyhledáváné

Diskuze: Vycentrování na střed