Wyśrodkowanie divów z floatem. Jakie są możliwości?

pytanie zadane 4 listopada 2016 w HTML i CSS przez winiardesign Gaduła (3,930 p.)

Mam pytanie odnośnie wycentrowania divów z właściwością float. Mianowicie jakie są sposoby na centrowanie dwóch divów z właściwością float. Szukałem dość długo i jedyne co się powtarzało na forach to wrzucenie tych dwóch divów w kolejnego diva i dopiero centrowanie. Kod jaki napisałem, w sumie jak zacząłem szukać sposobów innych na wyśrodkowanie, to prawie każdy znaleziony przykład był podobny do mojego.

<div class="pierwsza">
		<div class="extra">
			<div class="text">
				tekst 1
			</div>
			<div class="text">
				tekst 2
			</div>
		</div>
	</div>

CSS:

.pierwsza {
  width: 800px;
  height:250px;
  margin: 0 auto;
  background-color: yellow;
  text-align: center;
}

.extra {
   display: inline-block; 
}

.text {
  float:left;
  width:300px;
  background-color: blue;
  height:200px;
}

komentarz 4 listopada 2016 przez xmentor Nałogowiec (49,520 p.)

Flexbox (float można sobie odpuścić):

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

komentarz 4 listopada 2016 przez winiardesign Gaduła (3,930 p.)

Konkretnie chodzi mi o przykład z wykorzystaniem float, a nie flexbox.

komentarz 4 listopada 2016 przez jaca121212 Nałogowiec (40,760 p.)

Może to pomoże

https://www.youtube.com/watch?v=zPB74LBBPLU

2 odpowiedzi

odpowiedź 4 listopada 2016 przez rokezzz Użytkownik (710 p.)

Jeżeli nie chcesz użyć kolejnego diva (co według mnie jest najlepszym rozwiązaniem) to zrób funkcję w js, która będzie obliczała, jaki margines trzeba dać pierwszemu divowi, aby oba znajdowały się na środku, następnie użyj tej funkcji i podpisz pod zdarzenie onresize (zmiana rozmiarów strony), dzięki czemu będziesz miał zawsze divy na środku.

komentarz 4 listopada 2016 przez xmentor Nałogowiec (49,520 p.)

A co jeśli użytkownik będzie miał wyłączonego JS-a?

komentarz 4 listopada 2016 przez rokezzz Użytkownik (710 p.)

Dlatego właśnie umieszczenie divów w innym bloku jest lepszym rozwiązaniem.
Ale w tym konkretnym przypadku problemu nie będzie, bo mamy z góry ustaloną szerokość diva zewnętrznego i wewnętrznych, więc marginesy można ustawić na sztywno :)

odpowiedź 5 listopada 2016 przez pablop76 VIP (123,540 p.)

Witam. Można użyć padding

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>   
    <meta name="description" content="">
    <meta name="author" content="">
     <style>
.pierwsza {
  width: 800px;
  height:250px;
  margin: 0 auto;
  background-color: yellow;
padding: 0 100px;
} 
.text {
  float:left;
  width:300px;
  background-color: blue;
  height:200px;
  text-align: center;
}
</style>
</head>
<body>
<div class="pierwsza">
            <div class="text">
                tekst 1
            </div>
            <div class="text">
                tekst 2
            </div>
    </div>
</body>
</html>

komentarz 6 listopada 2016 przez winiardesign Gaduła (3,930 p.)

Przecież padding 0 100px nie wyśrodkuje mi dwóch divów, a po drugie chyba nie wiesz jak działa padding, on poszerza nam element o daną wartość i dopiero wtedy robi odstęp od środka. Jak chcesz aby za pomocą paddingu nie zmieniał się rozmiar elementu to używa się padding-box.