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

środkowanie elementów float:left

Aruba Cloud - Virtual Private Server VPS
0 głosów
1,070 wizyt
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

0 głosów
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.
0 głosów
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
0 głosów
odpowiedź 1 października 2017 przez Wujek Greg Dyskutant (9,410 p.)
Użyj flexa:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Bardzo łatwo można uzyskać taki efekt jaki chcesz, w razie pytań pisz
0 głosów
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

Podobne pytania

0 głosów
1 odpowiedź 692 wizyt
0 głosów
3 odpowiedzi 472 wizyt
pytanie zadane 31 lipca 2016 w HTML i CSS przez james30k Bywalec (2,260 p.)
0 głosów
3 odpowiedzi 522 wizyt
pytanie zadane 6 kwietnia 2016 w HTML i CSS przez Stami Gaduła (3,790 p.)

93,327 zapytań

142,323 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!

...