Wyśrodkowanie DIV

Hej! Ponownie mam mały problem, chcę postawić 4 obrazki poziome na stronie głównej. Stworzyłem moduł, w nim wpisałem kod, który utworzył 4 DIV'y o odpowiedniej klasie, w nich umieściłem obrazki, w CSS wpisałem

Code:

.banery {
    float: left;
    margin: 5px;
    padding: 15px;
    width: 200px;
    height: auto;
    border: 1px solid black;
}

Moduł wstawiłem między stroną główną a stopką strony. Gdy zmniejszam rozdzielczość przeglądarki, DIV'y po kolei schodzą niżej tak jak chciałem. Jedynie czego mi brakuje to aby te DIV'y były wyśrodkowane w stosunku do strony głównej , bo teraz są ustawione do lewej strony. Ważne, aby DIV'y tak zachowywały się przy każdej rodzielczości (przy mobilnej wersji mogą być po 2 DIV'y w jednym wersie. Próbowałem kombinować z width, max-width, ale nie wiem czy dobrze kombinuję.

Mam nadzieję, że dobrze wytłumaczyłem

EDIT.:
Chyba, że ktoś ma inne sensowniejsze rozwiązanie na to aby te 4 obrazki w poziomie zmieniały położenie ze względu na rozdzielczość .

Pozdrawiam!

 

div środkujesz poprzez dopisanie:
margin-left: auto;
margin-right: auto;

Warunkiem jest stałe zdefiniowanie szerokości div np. poprzez width: 300px; u ciebie jak widzę to jest zdefiniowane, więc wystarczy dopisać te parametry margin.

 

Hej, dzięki za szybką reakcję!

niestety po wpisaniu tych wartości divy tylko styknęły się i dalej są wyrównane do lewej strony


EDIT.:
spróbowałem coś takiego:

Code:

.banery {
    float: left;
    padding: 15px;
    width: 24%;
    margin-left: auto;
    margin-right: auto;
}
.banery img {
    width: 100%;
}

Myślicie, że coś takiego wystarczy?

 

Podając wartości procentowe w szerokości raczej nie wyśrodkujesz tego. Ja podałem sposób na wypośrodkowanie jednego lementu. Jeżeli masz kilka to:

Przykład np dla 4ch elementów

Określasz szerokość poszególnych grafik np. 200px
Jeśli mają być w jednej linii to dopisujesz float: left oraz np za pomocą padding ustawiasz im odległości między nimi np na 30px
To jest klasa przypisana do samych grafik

następnie tworzysz jeden kontener div w którym zawierasz te obrazki-bannery
dla diva ustaw jakąś stałą szerokość np 950px (to tylko przykład oczywiście
dodajesz mu te parametry margin-left:auto; oraz margin-right: auto;

Powinno ci to zatrybić, jeśli nie, ustaw divowi wartość blokową jeszcze poprzez display: block;

Nie mam jak obecnie tego przetestowac i pisze to z głowy ale jak byłby dalej problem pisz.

 

czasami wymagane jest jeszcze dodanie

Code:

text-align:center;

 

Coś robię nie tak, obrazki w jednym DIV'ie wprawdzie są wyśrodkowane jak chciałem ale po zmianie rozdzielczości niestety dalej twardo trzymają się razem i nie schodzą kolejno pod siebie. Póki co rozwiązałem to poprzez wpisanie kodu z ul i li, to jest chyba dobre rozwiązanie co?

 

OK, nie ma tematu, chyba uporałem się z tym problemem Dzięki panowie za pomoc

 

@michalhockey podzielisz się rozwiązaniem z nami?

 

text-align:center; powinno pomóc w takich sytuacjach jeśli damy go w odpowiedniej klasie, niestety nie zawsze margin na auto da pożądany efekt.

 

Jasne, ciekaw jednak jestem jakie zmiany wprowadził michalhockey czy tylko na tym się skończyło co Ty piszesz TheL.

 

@Grzesiek Jasne, jak znajdę czas to wstawię tu kod