Wyśrodkowanie kilku elementów obrazkowych na stronie

Question

Witam serdecznie,

mam świadomość, że temat był już poruszany na forum, ale niestety nie jestem w stanie wykorzystać nabytej w nich wiedzy w swoim problemie.

A więc, chciałbym wyśrodkować 6 obrazków, rozmieszczonych w dwóch "divach". Problem polega na tym, że nieznanej mi przyczyny divy te nie środkują się, ale jedynie delikatnie przesuwają. W którym miejscu umieścić center żeby były na środku strony? Poniżej kod oraz screen ze strony.

<div class="container fx-gcss" style="text-align: center;"><a class="fx-gcss-i1" href="/pl/c/Klasyczny/19"><span class="fx-span"><img src="/userdata/public/assets//classicccc.jpg" alt="Darmowa dostawa" width="242" height="242" /></span> <span class="fx-span" style="color: #000000;"><strong>KLASYCZNE</strong> </span></a><a class="fx-gcss-i2" href="/pl/c/Elegancki/52"><span class="fx-span"><img src="/userdata/public/assets//%28Sponsored%29eBay%20-%20Men%27s%20Dark%20Gray%20Slim%20Fit%20Suit%20Two%20Button%20Groom%20Tuxedos%20Formal%20Party%20Prom%20Suit.jpg" alt="Darmowa dostawa" width="236" height="244" /></span> <span class="fx-span"><strong>ELEGANCKIE</strong></span></a><a class="fx-gcss-i3" href="/pl/c/Bizuteryjny/22"><span class="fx-span"><img src="/userdata/public/assets//pobrane.jpg" alt="Darmowa dostawa" width="244" height="244" /></span> <span class="fx-span"><strong>BIŻUTERYJNE</strong></span> </a></div>
<div class="container fx-gcss" style="text-align: center;"> </div>
<div class="container fx-gcss" style="text-align: center;"><a class="fx-gcss-i4" href="/pl/c/Sportowy/44"><span class="fx-span"><img src="/userdata/public/assets//5%20incre%C3%ADbles%20beneficios%20que%20nos%20aporta%20correr%20diariamente.jpg" alt="Darmowa dostawa" width="243" height="238" /></span> <span class="fx-span"><strong>SPORTOWE</strong></span></a><a class="fx-gcss-i5" href="/pl/c/Smartwarch/56"><span class="fx-span"><img src="/userdata/public/assets//zmieniony%20smart.jpg" alt="Darmowa dostawa" width="236" height="239" /></span> <span class="fx-span"><strong>SMARTWATCHE</strong></span> </a> <a class="fx-gcss-i6" href="/pl/c/Dziecko/29"><span class="fx-span"><img src="/userdata/public/assets//accessory-dessert-donut-doughnut-179907.jpg" alt="Darmowa dostawa" width="243" height="245" /></span> <span class="fx-span"><strong>DLA DZIECI</strong></span></a> </div>

Pozdrawiam serdecznie i proszę o pomoc bo zaraz osiwieje.. :( 

Comments

A to divy mają zostać wyśrodkowane czy tekst/obrazki w środku nich?

---

w zasadzie całe divy, składają się po 3 obrazki na wiersz

Answer 1

Przyznam szczerze, że nie bardzo wiem co tu się dzieje. Obrazki w spanach, stylowanie bezpośrednio w HTML. Masakra jakaś. 

Jeśli chcesz wyśrodkować divy to zamknij je we wraperze i nadaj im w css display: flex oraz justify-content: center.

Tutaj przykład jak można to zrobić:

CSS:

.container-wrapper {
    display: flex;
    justify-content: center;
}

.image-wrapper {
    display: block;
    position: relative;
    z-index: 1;
    margin: 0 30px;
}

.image-text {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    z-index: 2;
    text-align: center;
    padding: 20px 0;
    background: rgba(0, 0, 0, .4);
}

HTML:

<div class="container-wrapper">
    <a href="#" class="image-wrapper">
        <img src="https://via.placeholder.com/300">
        <span class="image-text"> Some image itext </span>
    </a>

    <a href="#" class="image-wrapper">
        <img src="https://via.placeholder.com/300">
        <span class="image-text"> Some image itext </span>
    </a>

    <a href="#" class="image-wrapper">
        <img src="https://via.placeholder.com/300">
        <span class="image-text"> Some image itext </span>
    </a>
</div>

 

Comments

Popieram.

Ja bym jeszcze uprościł:

https://codepen.io/frostify/pen/Yzydyqj