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.
Člen
Zobrazeno 7 zpráv z 7.
V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.
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.
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.
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.
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í.
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.
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 {
.......
}
}
Zobrazeno 7 zpráv z 7.