IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
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í.

Diskuze: Centrování objektu uvnitř .container

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

Aktivity
Avatar
Lukáš Navrátil
Člen
Avatar
Lukáš Navrátil:9.4.2020 16:48

Zdravím,

rád bych se zeptal na nejspíš banální otázku, ale já se na ní zasekl.

První box se vždy nalepí na levou stranu.

HTML - https://www.itnetwork.cz/…lighter/1305
CSS - https://www.itnetwork.cz/…lighter/1306

Zkusil jsem: margin: auto;

Našel jsem také toto:

display: inline-block;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 200px;
height: 100px;
margin: auto;
background-color: #f3f3f3;">Full Center ON Page

Ale přijde mi, že musí být jednoduší řešení a že je to v mém případně trochu kanon na vrabce.

Chci docílit: Chtěl bych zarovnat tři bloky .box-first na střed a margin: auto; - bohužel nefunguje.

První box se vždy nalepí na levou stranu.

 
Odpovědět
9.4.2020 16:48
Avatar
Jaroslav Smrž
Tvůrce
Avatar
Odpovídá na Lukáš Navrátil
Jaroslav Smrž:9.4.2020 19:20

Ahoj, pokud používáš bootstrap, tak by to následovně:

<div class="container">
  <div class="row justify-content-center">
    <div class="col-4 text-center box-shadow">
      <h1>Text</h1>
    </div>
  </div>
</div>

box-shadow a text-center jsou volitelné třídy.

Editováno 9.4.2020 19:22
Nahoru Odpovědět
9.4.2020 19:20
/* Life runs on code */
Avatar
Lukáš Navrátil
Člen
Avatar
Odpovídá na Jaroslav Smrž
Lukáš Navrátil:9.4.2020 19:56

Na bootstrap se chystám, ale nejdřív jsem se chtěl naučit kompletně CSS abych byl schopný udělat web jak s bootstrapem, tak i bez něj.

Každopádně tohle je čistě jen CSS a snažím se právě najít nějaký validní a standardizovany způsob.

I tak ale děkuju.

 
Nahoru Odpovědět
9.4.2020 19:56
Avatar
Jaroslav Smrž
Tvůrce
Avatar
Odpovídá na Lukáš Navrátil
Jaroslav Smrž:9.4.2020 21:17

Tak ono si to lehce převedeš i na CSS podle názvů bootstrap tříd.

<div class="row">
  <div class="box">
    <p>Text</p>
  </div>
</div>

CSS

.row {
  justify-content: center;
  width: 100%;
  wrap: no-wrap;
  display: flex;
}

.box {
  display: block;
  width: 18rem;
  padding: 10px;
  background-color: #000000;
  color: #ffffff;
}

.box p {
  text-align: center;
}

Důležité je nastavit si, jak se mají prvky zobrazovat pomocí display.

Editováno 9.4.2020 21:18
Nahoru Odpovědět
9.4.2020 21:17
/* Life runs on code */
Avatar
Jaroslav Smrž
Tvůrce
Avatar
Odpovídá na Lukáš Navrátil
Jaroslav Smrž:9.4.2020 21:22

Boxů si pak můžeš přidávat kolik chceš a budou se ti řadit za sebe. Jen bych jim nastavil šířku v procentech a ne fixní.

Nahoru Odpovědět
9.4.2020 21:22
/* Life runs on code */
Avatar
Lukáš Navrátil
Člen
Avatar
Lukáš Navrátil:10.4.2020 10:41

V podstatě mi jde o to, aby ta navigace ze tří bloků byla na středu bez použití fixní hodnoty px - která by kazila responzibilitu.

http://tersource.cz/ - Tady je jak to vypadá s margin-top: 10%

Nejsem si ale jistý, jak se to bude chovat na různých zařízeních a hlavně, zda je to validní a standardizovaný postup.

Díky.

 
Nahoru Odpovědět
10.4.2020 10:41
Avatar
Jaroslav Smrž
Tvůrce
Avatar
Jaroslav Smrž:10.4.2020 16:36

Jakou responsivitu myslíš? Když stránku zmenším, tak se to rozsype, respektive přeteče. Nevím, že nepoužiješ alespoň bootstrap grid a trápíš se s tím. Ale jinak responsivní design se dělá pomocí tzv. media queries - @media
Například

@media (max-width: 768px) {
  element {
    .......
  }
}
Nahoru Odpovědět
10.4.2020 16:36
/* Life runs on code */
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 7 zpráv z 7.