środkowanie elementów float:left

pytanie zadane 1 października 2017 w HTML i CSS przez hakiros54 Obywatel (1,160 p.)
edycja 1 października 2017 przez HaKIM

Witam, mam parę divów obok siebie (kafelek), wszystkie są w divie container, mają float left ale chciałbym by były po środku containera. strona na różnych ekranach wyświetla w jednym rzędzie różną ilość kafelek obok siebie, gdy nie mieszczą się już containerze przeskakują niżej, problem nie jest w tym że przeskakują tylko w tym że zostaje wtedy po prawej sporo wolnego miejsca i chciałbym żeby albo wszystkie kafelki przesunęły się w prawo tak by były wyśrodkowane.
powinno to wyglądać tak: https://www.fotosik.pl/zdjecie/899e021d632698f8

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>wysrodkowanie</title>
	<style type="text/css">
	.container{
	width: 70%;
	margin-left: auto;
	margin-right: auto;
	background-color: gray;
	position: relative;
	text-align: center;
}
.main{
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width:auto;
}
.kafelka{
	width:180px;
	height: 100px;
	margin:15px;
	float:left;
	background-color: #1D92E5;
}
	</style>
</head>
<body>
	<div class="container">
		<div class="main">
			<div class="kafelka"></div>
			<div class="kafelka"></div>
			<div class="kafelka"></div>
			<div class="kafelka"></div>
			<div class="kafelka"></div>
			<div class="kafelka"></div>
			<div class="kafelka"></div>
			<div class="kafelka"></div>
			<div class="kafelka"></div>
			<div style="clear:both;"></div>
		</div>
	</div>
</body>

</html>

4 odpowiedzi

odpowiedź 1 października 2017 przez shotokan Nałogowiec (39,660 p.)

W CSS nie ma opcji automatycznej do tego, co chcesz (przynajmniej ja nie znam), możesz spróbować z margin: 0, auto, ale przy float:left trzeba już na sztywno ustawiać marginesy i padding i koniec, tak samo rozmiar kafelek musi być taki, aby się mieściły ładnie w kontenerze.
Co do responsywności strony to polecam zapoznać się z zapytaniami medialnymi (media queries) lub z Bootstrapem. Ustawić wtedy, że przy takiej szerokości strony (czyli takiej a takiej wielkości ekranu) w rzędzie będzie 5 kafelek, przy mniejszej wielkości ekranu 4, itp.

odpowiedź 1 października 2017 przez Schizohatter Nałogowiec (39,600 p.)

Zamiast float left użyj display: inline-block.

Wtedy na rodzicu możesz użyć text-align: center.

komentarz 1 października 2017 przez hakiros54 Obywatel (1,160 p.)

problem w tym że wtedy te kafelki które przeszły piętro niżej też są wyśrodkowane a powinny być tak jakby po lewej, pod tymi wyżej, mam nadzieje że rozumiesz, ale i tak dzięki bo zawsze coś :)

komentarz 1 października 2017 przez Schizohatter Nałogowiec (39,600 p.)

To dlaczego napisałeś:

i chciałbym żeby albo wszystkie kafelki przesunęły się w prawo tak by były wyśrodkowane.

komentarz 1 października 2017 przez hakiros54 Obywatel (1,160 p.)

dałem zdjęcie jak to powinno wyglądać by nie było wątpliwości ale faktycznie może trochę źle opisałem

odpowiedź 1 października 2017 przez Wujek Greg Dyskutant (9,410 p.)

odpowiedź 1 października 2017 przez Patryk L Bywalec (2,000 p.)

Daj containerowi width np 1000 px, kafelki zrób po 300 i jakieś marginesy żeby wypełniło całą powierzchnie. Wtedy będziesz mógł na container nałożyć margin: 0 auto; i będzie po środku a na dodatek strona na różnych ekranach będzie wyglądała tak samo

komentarz 1 października 2017 przez hakiros54 Obywatel (1,160 p.)

i na telefonach będzie o wiele za duża a na wielkich monitorach będzie śmiesznie mała, to nie jest responsywna strona

komentarz 1 października 2017 przez Patryk L Bywalec (2,000 p.)

Można wykryć przeglądarkę mobilną i dla niej zrobić osobny styl. te 1000px dałem przykładowo. Trzeba myśleć troche logicznie ;)

Można też za pomocą css wykryć wielkość ekranu czy coś takiego. Polecam wujka google