Margine automatico

Lezione 2 di 9 del corso Come centrare un div o del testo usando CSS di Coddy.

Per centrare un div orizzontalmente, puoi impostare la proprietà margin su auto.

Il valore auto occuperà tutto lo spazio orizzontale rimanente.

margin: auto;

Funzioneranno anche margin-left: auto; e margin-right: auto;!

Nota: non lo centrerà verticalmente!

Sfida

Facile

Usando ciò che hai imparato, centra orizzontalmente il riquadro blu all'interno di quello rosso.

Nota che il valore di margin-left sarà 75px invece di auto. Perché?

Provalo tu

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <div id="red-box">
            <div id="blue-box" />
        </div>
    </body>
</html>

Tutte le lezioni di Come centrare un div o del testo usando CSS

1Introduzione

Che cos'è questo corso?

2Centrare un div

Margine automaticoPosizionamento assoluto - Trasla Posizionamento assoluto - Margine Flexbox Sfida di ripasso

3Centrare il testo

Allineamento del testo Flex Box Sfida finale

Esercitati da solo: Playground Web