Automatyczne marginesy

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

Aby wyśrodkować element div poziomo, możesz ustawić właściwość margin na auto.

Wartość auto zajmie całą pozostałą przestrzeń poziomą.

margin: auto;

Zadziałają również margin-left: auto; i margin-right: auto;!

Uwaga: nie wyśrodkuje go pionowo!

Wyzwanie

Łatwy

Wykorzystując zdobytą wiedzę, wyśrodkuj niebieskie pudełko poziomo wewnątrz czerwonego.

Zauważ, że wartość margin-left wyniesie 75px zamiast auto. Dlaczego?

Spróbuj swoich sił

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <div id="red-box">
            <div id="blue-box" />
        </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 marginesyPozycjonowanie absolutne — translate Pozycjonowanie absolutne — margines Flexbox Wyzwanie podsumowujące

3Wyśrodkuj tekst

Wyrównanie tekstu Flexbox Wyzwanie końcowe

Poćwicz samodzielnie: Edytor online Web