Flexbox

Lekcja 5 z 9 w kursie Jak wyśrodkować element div lub tekst za pomocą CSS w Coddy.

Najlepszym sposobem na wyśrodkowanie elementu div jest prawdopodobnie użycie Flexboxa (albo czegokolwiek innego!)

Flexbox to responsywna metoda, która nie wymaga obliczania marginesów ani położenia.

Aby użyć flexboxa, dodaj display: flex; do nadrzędnego elementu div — dzięki temu stanie się on kontenerem flexbox. Aby wyśrodkować wszystko wewnątrz elementu nadrzędnego, użyj align-items: center; i justify-content: center;

Całość wygląda tak:

#parent {
	display: flex;
	align-items: center;
	justify-content: center;
}

Uwaga: nie trzeba niczego dodawać do podrzędnego elementu div!

Wyzwanie

Łatwy

Wyśrodkuj potomny element div za pomocą flexboxa.

Spróbuj swoich sił

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <div id="parent">
            <div id="child"/>
        </div>
    </body>
</html>

Wszystkie lekcje w sekcji Jak wyśrodkować element div lub tekst za pomocą CSS

1Wprowadzenie

Czym jest ten kurs?

2Wyśrodkowywanie div

Automatyczne marginesy Pozycjonowanie absolutne — translate Pozycjonowanie absolutne — marginesFlexboxWyzwanie podsumowujące

3Wyśrodkuj tekst

Wyrównanie tekstu Flexbox Wyzwanie końcowe

Poćwicz samodzielnie: Edytor online Web