| 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 |
#3 · Zasláno: 1. 5. 2016, 17:31:59
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 |
#5 · Zasláno: 1. 5. 2016, 17:36:29
Fori:
Tady narážim na problém, že je ta poslední fotka vycentrovaná |
||
| Tomáš123 Profil |
#6 · Zasláno: 1. 5. 2016, 21:52:43
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. |
||
|
Časová prodleva: 9 let
|
|||
0