• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Wyśrodkowanie kilku elementów obrazkowych na stronie

Aruba Cloud - Virtual Private Server VPS
0 głosów
424 wizyt
pytanie zadane 17 maja 2020 w HTML i CSS przez Mrzegarek Nowicjusz (120 p.)

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.. :( 

komentarz 17 maja 2020 przez Bartx Bywalec (2,120 p.)
A to divy mają zostać wyśrodkowane czy tekst/obrazki w środku nich?
komentarz 17 maja 2020 przez Mrzegarek Nowicjusz (120 p.)
w zasadzie całe divy, składają się po 3 obrazki na wiersz

1 odpowiedź

0 głosów
odpowiedź 17 maja 2020 przez eunstachy Stary wyjadacz (14,180 p.)

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>

 

komentarz 19 maja 2020 przez frostify Mądrala (5,640 p.)

Popieram.

Ja bym jeszcze uprościł:

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

Podobne pytania

0 głosów
1 odpowiedź 795 wizyt
pytanie zadane 15 marca 2017 w HTML i CSS przez Karol Loczeski Użytkownik (820 p.)
+1 głos
2 odpowiedzi 3,227 wizyt
pytanie zadane 6 marca 2018 w HTML i CSS przez BIREXD Obywatel (1,180 p.)
0 głosów
4 odpowiedzi 11,042 wizyt
pytanie zadane 11 marca 2017 w HTML i CSS przez bartek712 Nowicjusz (140 p.)

93,327 zapytań

142,325 odpowiedzi

322,396 komentarzy

62,657 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...