Esercitazione CSS

CSS CASA Introduzione CSS Sintassi CSS Selettori CSS CSS Come fare per Commenti CSS Colori CSS Sfondi CSS Confini CSS Margini CSS Imbottitura CSS Altezza/larghezza CSS Modello a scatola CSS Schema CSS Testo CSS Font CSS Icone CSS Collegamenti CSS Elenchi CSS Tabelle CSS Display CSS Larghezza massima CSS Posizione CSS Indice Z CSS Overflow CSS CSS galleggiante CSS Inline-block Allineamento CSS Combinatori CSS Pseudo-classe CSS Pseudoelemento CSS Opacità CSS Barra di navigazione CSS Menu a discesa CSS Galleria di immagini CSS Sprite di immagini CSS Selettori CSS Attr Moduli CSS Contatori CSS Layout del sito Web CSS Unità CSS Specificità CSS CSS! importante Funzioni matematiche CSS

CSS avanzato

Angoli arrotondati CSS Immagini del bordo CSS Sfondi CSS Colori CSS Parole chiave a colori CSS Gradienti CSS Ombre CSS Effetti di testo CSS Font Web CSS Trasformazioni 2D CSS Trasformazioni CSS 3D Transizioni CSS Animazioni CSS Suggerimenti CSS Immagini in stile CSS Riflessione dell'immagine CSS Adattamento agli oggetti CSS Posizione dell'oggetto CSS Mascheratura CSS Pulsanti CSS Impaginazione CSS Colonne multiple CSS Interfaccia utente CSS Variabili CSS Dimensioni della scatola CSS Query sui media CSS Esempi CSS MQ Cassetta flessibile CSS

CSS reattivo

Introduzione a RWD Vista posteriore Vista griglia RWD Query sui media RWD Immagini RWD Video RWD Quadri RWD Modelli RWD

Griglia CSS

Introduzione alla griglia Contenitore a griglia Elemento griglia

CSS SASS

Esercitazione SASS

Esempi CSS

Modelli CSS Esempi CSS css quiz Esercizi CSS Certificato CSS

Riferimenti CSS

Riferimento CSS Selettori CSS Funzioni CSS CSS di riferimento sonoro Font sicuri per il Web CSS CSS Animabile Unità CSS Convertitore CSS PX-EM Colori CSS Valori di colore CSS Valori predefiniti CSS Supporto del browser CSS

Layout CSS - Allineamento orizzontale e verticale


Centrare gli elementi
orizzontalmente e verticalmente


Allineamento centrale elementi

Per centrare orizzontalmente un elemento di blocco (come <div>), utilizzaremargin: auto;

L'impostazione della larghezza dell'elemento impedirà che si allunghi fino ai bordi del suo contenitore.

L'elemento occuperà quindi la larghezza specificata e lo spazio rimanente verrà diviso equamente tra i due margini:

Questo elemento div è centrato.

Esempio

.center {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
}

Nota: l'allineamento al centro non ha effetto se la widthproprietà non è impostata (o impostata su 100%).


Allinea al centro il testo

Per centrare semplicemente il testo all'interno di un elemento, usatext-align: center;

Questo testo è centrato.

Esempio

.center {
  text-align: center;
  border: 3px solid green;
}

Suggerimento: per ulteriori esempi su come allineare il testo, vedere il capitolo Testo CSS .



Centrare un'immagine

Per centrare un'immagine, imposta i margini sinistro e destro autoe trasformala in un blockelemento:

Parigi

Esempio

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

Allineamento sinistro e destro - Utilizzo della posizione

Un metodo per allineare gli elementi consiste nell'usare position: absolute;:

Nei miei anni più giovani e vulnerabili, mio ​​padre mi ha dato alcuni consigli che da allora mi sono ripensato.

Esempio

.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

Nota: gli elementi posizionati assoluti vengono rimossi dal flusso normale e possono sovrapporsi agli elementi.


Allineamento sinistro e destro - Usando float

Un altro metodo per allineare gli elementi consiste nell'utilizzare la floatproprietà:

Esempio

.right {
  float: right;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

Il clearfix Hack

Nota: se un elemento è più alto dell'elemento che lo contiene ed è mobile, traboccherà fuori dal suo contenitore. Puoi usare il "clearfix hack" per risolvere questo problema (vedi esempio sotto).

Senza Clearfix

Con Clearfix

Quindi possiamo aggiungere l'hack clearfix all'elemento contenitore per risolvere questo problema:

Esempio

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

Centra verticalmente - Usando il riempimento

There are many ways to center an element vertically in CSS. A simple solution is to use top and bottom padding:

I am vertically centered.

Example

.center {
  padding: 70px 0;
  border: 3px solid green;
}

To center both vertically and horizontally, use padding and text-align: center:

I am vertically and horizontally centered.

Example

.center {
  padding: 70px 0;
  border: 3px solid green;
  text-align: center;
}

Center Vertically - Using line-height

Another trick is to use the line-height property with a value that is equal to the height property:

I am vertically and horizontally centered.

Example

.center {
  line-height: 200px;
  height: 200px;
  border: 3px solid green;
  text-align: center;
}

/* If the text has multiple lines, add the following: */
.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}

Center Vertically - Using position & transform

If padding and line-height are not options, another solution is to use positioning and the transform property:

I am vertically and horizontally centered.

Example

.center {
  height: 200px;
  position: relative;
  border: 3px solid green;
}

.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Tip: You will learn more about the transform property in our 2D Transforms Chapter.


Center Vertically - Using Flexbox

You can also use flexbox to center things. Just note that flexbox is not supported in IE10 and earlier versions:

I am vertically and horizontally centered.

Example

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid green;
}

Tip: You will learn more about Flexbox in our CSS Flexbox Chapter.


Test Yourself With Exercises

Exercise:

Use the margin property to make sure that the <div> element is center aligned according to its parent element.

<style>
.intro {
  width: 200px;
  : ;
}
</style>

<body>

<div class="intro">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum,
nisi lorem egestas odio,
vitae scelerisque enim ligula venenatis dolor. </div> </body>