Autor Zpráva
Papinak
Profil
Zdravím,
dostal jsem na dokončení jeden projekt a mám problém s centrováním galerie. Jde o to, že potřebuji vycentrovat classu album (kompletní cesta #galerie .stred .album), ale nesmí se v albu centrovat example-image resp. example-image-link. To znamená, že budu mít album na stránce pěkně vycentrované, ale nebudou vycentrované jednotlivé obrázky tzn. že fotka na poslední řádce nebude uprostřed (tak, jak můžete vidět na webu), ale vlevo ve vycentrovaném albu.

Pro shrnutí potřebuji vycentrovat aktuální .album na stránce bez centrování .example-image.

Galerie se nachází na této stránce pod nadpisem prohlídka zámku.
Fori
Profil
Šlo by to tak, že bys měl dva sloupce a ten levý align rigth a pravý align left
Papinak
Profil
Fori:
Nešlo by to nějak pro x sloupců?
Fori
Profil
A nebo skus dát pryč padding-left a float:
#galerie a {
    display: inline-block;
    /* padding-left: 5px; */
    /* float: left; */
    margin: 0 auto;
}

Moderátor Davex: Vrácen obsah smazaného příspěvku z důvodu zachování souvislosti.
Papinak
Profil
Fori:
Tady narážim na problém, že je ta poslední fotka vycentrovaná
Tomáš123
Profil
Papinak:
Ak odstrániš text-align: center z deklarácii na riadkoch 16, 139 a 159 v súbore home.css, zbavíš sa nechceného centrovania.

Kvôli percentuálnej šírke obalu (width: 50% v deklarácii na riadku 159 v súbore home.css) a fixnej šírke obrázkov občas nastane situácia, keď v riadku ostáva voľné miesto a galéria pôsobí nevystredene.

To by šlo riešiť fixnou šírkou obalu alebo percentuálnou hodnotou šírky obrázkov. Potom ešte doplniť úpravu rozloženia pri menšom rozlíšení pomocou @media pravidiel...

V tvojom prípade by som sa púšťal skôr do percentálnych rozmerov.

Pseudokód HTML:
<div class=obal>
  <img>
  <img>
  <img>
  <img>
</div>

Pseudokód CSS:
.obal {
    width: 50%;
    margin: auto;
}
.obal img {
    float: left;
    width: 30%; /* tri stĺpce; 10% na dve 5% medzery */
    max-width: 100%;
}
@media (max-width: 400px) {
    .obal {
        width: auto;
    }
    .obal img {
        width: 47.5%; /* dva stlpce; 5% na medzeru v strede */
    }
}
@media (max-width: 200px) {
    .obal img {
        float: none;
        width: auto;
    }
}

Kód
Ukážka

Popis CSS3 pseudotried v ukážke
Papinak
Profil
Díky za radu, ale stejně to bohužel není to, co jsem chtěl :)
Každopádně je to jedna z nejlepších rad, kterou jsem ohledně této problematiky dostal.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: