Wycentrowanie (wyśrodkowanie) galerii – problem
-
Witam, mam tworzony przez zew. firmę szablon, ale niestety mnie zlali i już mi pomóc nie chcą po skasowaniu forsy. Próbowałem sam to ogarnąć na swoim localhoście ale nie idzie… Mianowicie chciałbym wycentrować galerię.
Żebym nie wyszedł na lenia grzebałem w sieci i próbowałem zmienić funkcję float: na none i center ale jak to robię to zamiast mi wycentować galerię to ją centruje, ale każda kolumna jest jedna pod drugą zamiast być wycentowane koło siebie.
CSS od galerii wygląda tak:
/* ---------------------------------------------------------------------------- default wordpress gallery */ /* ---------------------------------------------------------------------------- gallery */ .gallery:after, .gallery:before { clear: both; content: ""; display: table; } .gallery-caption { color: #220e10; font-size: 18px; font-style: italic; font-weight: 300; } .gallery { margin-bottom: 21px; } .gallery-item { float: left; margin: 0 4px 4px 0; overflow: hidden; position: relative; } .gallery-columns-1.gallery-size-medium, .gallery-columns-1.gallery-size-thumbnail, .gallery-columns-2.gallery-size-thumbnail, .gallery-columns-3.gallery-size-thumbnail { display: table; margin: 0 auto 20px; } .gallery-columns-1 .gallery-item { text-align: center; max-width: 36.75%; max-width: -webkit-calc(32.75%); max-width: calc(96%); /* responsive portrait tablet */ } @media (min-width: 768px) and (max-width: 1018px) { .gallery-columns-1 .gallery-item { max-width: 100%; max-width: -webkit-calc(100%); max-width: calc(100%); } } .gallery-columns-2 .gallery-item { text-align: center; max-width: 50%; max-width: -webkit-calc(46%); max-width: calc(46%); height: 170px; /* responsive portrait tablet */ /* responsive phone */ } @media (min-width: 768px) and (max-width: 1018px) { .gallery-columns-2 .gallery-item { height: 130px; max-width: 49%; max-width: -webkit-calc(49%); max-width: calc(49%); } } @media (max-width: 767px) { .gallery-columns-2 .gallery-item { max-width: 32%; max-width: -webkit-calc(28%); max-width: calc(28%); height: 90px; } } .gallery-columns-3 .gallery-item { text-align: center; max-width: 36.5%; max-width: -webkit-calc(32.5%); max-width: calc(32.5%); height: 110px; /* responsive portrait tablet */ /* responsive monitor */ /* responsive phone */ } @media (min-width: 768px) and (max-width: 1018px) { .gallery-columns-3 .gallery-item { max-width: 32.4%; max-width: -webkit-calc(32.4%); max-width: calc(32.4%); height: 85px; } } @media (min-width: 1200px) { .gallery-columns-3 .gallery-item { max-width: 36.7%; max-width: -webkit-calc(32.7%); max-width: calc(32.7%); height: 125px; } } @media (max-width: 767px) { .gallery-columns-3 .gallery-item { height: 80px; } } .gallery-columns-4 .gallery-item { text-align: center; max-width: 23%; max-width: -webkit-calc(21%); max-width: calc(21%); height: 85px; /* responsive portrait tablet */ /* responsive phone */ } @media (min-width: 768px) and (max-width: 1018px) { .gallery-columns-4 .gallery-item { max-width: 24.1%; max-width: -webkit-calc(24.1%); max-width: calc(24.1%); height: 70px; } } @media (max-width: 767px) { .gallery-columns-4 .gallery-item { height: 90px; } } .gallery-columns-5 .gallery-item { text-align: center; max-width: 19%; max-width: -webkit-calc(16%); max-width: calc(16%); height: 60px; /* responsive portrait tablet */ /* responsive phone */ } .gallery-columns-5 .gallery-item .gallery-caption { display: none; } @media (min-width: 768px) and (max-width: 1018px) { .gallery-columns-5 .gallery-item { max-width: 22.5%; max-width: -webkit-calc(18.5%); max-width: calc(18.5%); height: 55px; } } @media (max-width: 767px) { .gallery-columns-5 .gallery-item { height: 90px; } } .gallery-columns-6 .gallery-item { text-align: center; max-width: 15%; max-width: -webkit-calc(12.7%); max-width: calc(12.7%); height: 50px; /* responsive portrait tablet */ /* responsive phone */ } .gallery-columns-6 .gallery-item .gallery-caption { display: none; } @media (min-width: 768px) and (max-width: 1018px) { .gallery-columns-6 .gallery-item { height: 35px; } } @media (max-width: 767px) { .gallery-columns-6 .gallery-item { height: 90px; } } .gallery-columns-7 .gallery-item { text-align: center; max-width: 13%; max-width: -webkit-calc(10.28%); max-width: calc(10.28%); height: 40px; /* responsive portrait tablet */ /* responsive phone */ } @media (min-width: 768px) and (max-width: 1018px) { .gallery-columns-7 .gallery-item { height: 32px; } } @media (max-width: 767px) { .gallery-columns-7 .gallery-item { height: 90px; } } .gallery-columns-8 .gallery-item { text-align: center; max-width: 11%; max-width: -webkit-calc(8.5%); max-width: calc(8.5%); height: 35px; /* responsive portrait tablet */ /* responsive phone */ } @media (min-width: 768px) and (max-width: 1018px) { .gallery-columns-8 .gallery-item { height: 25px; } } @media (max-width: 767px) { .gallery-columns-8 .gallery-item { height: 90px; } } .gallery-columns-9 .gallery-item { text-align: center; max-width: 9%; max-width: -webkit-calc(7.1%); max-width: calc(7.1%); height: 30px; /* responsive phone */ } @media (max-width: 767px) { .gallery-columns-9 .gallery-item { height: 90px; } } .gallery-item { /* responsive phone */ } @media (max-width: 767px) { .gallery-item { width: calc(49%) !important; } } .gallery-caption { background-color: rgba(0, 0, 0, 0.7); box-sizing: border-box; color: #fff; font-size: 12px; line-height: 1.3; margin: 0; max-height: 50%; opacity: 0; padding: 2px 8px; position: absolute; bottom: 0; left: 0; text-align: left; -webkit-transition: opacity 400ms ease; transition: opacity 400ms ease; width: 100%; } .gallery-caption:before { box-shadow: 0 -10px 15px #000000 inset; content: ""; height: 100%; min-height: 49px; position: absolute; left: 0; top: 0; width: 100%; } .gallery-item:hover .gallery-caption { opacity: 1; } .gallery-columns-7 .gallery-caption, .gallery-columns-8 .gallery-caption, .gallery-columns-9 .gallery-caption { display: none; } /* responsive phone */ @media (max-width: 767px) { .gallery { margin-left: 0; } .gallery .gallery-item, .gallery-columns-2.gallery-size-thumbnail .gallery-item { max-width: none; width: 49%; width: -webkit-calc(46%); width: calc(46%); } .gallery-columns-1.gallery-size-medium, .gallery-columns-1.gallery-size-thumbnail, .gallery-columns-2.gallery-size-thumbnail, .gallery-columns-3.gallery-size-thumbnail { display: block; } .gallery-columns-1 .gallery-item, .gallery-columns-1.gallery-size-medium .gallery-item, .gallery-columns-1.gallery-size-thumbnail .gallery-item { text-align: center; width: 98%; width: -webkit-calc(96%); width: calc(96%); } .gallery-columns-3 .gallery-item:nth-of-type(3n), .gallery-columns-5 .gallery-item:nth-of-type(5n), .gallery-columns-7 .gallery-item:nth-of-type(7n), .gallery-columns-9 .gallery-item:nth-of-type(9n) { margin-right: 4px; } .gallery br { display: none; } .gallery .gallery-item:nth-of-type(even) { margin-right: 0; } } /* ----------------------------------------------------------------------------
Będę wdzięczny za pomoc!!!
Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
- Temat ‘Wycentrowanie (wyśrodkowanie) galerii – problem’ jest zamknięty na nowe odpowiedzi.