Layout CSS - Allineamento Orizzontale e Verticale

centramento degli elementi

elementi centrati orizzontalmente e verticalmente

allineamento centrale degli elementi

Per centrare un blocco di elementi (ad esempio <div>), utilizzare margin: auto;.

Impostare la larghezza dell'elemento impedirà che si estenda ai margini del contenitore.

Poi, l'elemento occuperà la larghezza specificata e lo spazio rimanente sarà distribuito in modo equo tra i margini esterni:

Questo elemento div è centrato.

Esempio

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

Prova da solo

注意：Se non è impostata larghezza proprietà (o impostarla al 100％), l'allineamento centrale non è efficace.

allineamento centrale del testo

Se si desidera centrare il testo all'interno di un elemento, utilizzare text-align: center;：

Questo testo è centrato.

Esempio

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

Prova da solo

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

allineamento centrale dell'immagine

Se si desidera centrare un'immagine, impostare i margini laterali auto，并将其设置为块元素：

Esempio

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

Prova da solo

左和右对齐 - 使用 position

对齐元素的一种方法是使用 position: absolute; :

这个 div 是右对齐的。

Esempio

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

Prova da solo

注意：绝对定位的元素将从正常流中删除，并可能出现元素重叠。

左和右对齐 - 使用 float

对齐元素的另一种方法是使用 float 属性：

Esempio

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

Prova da solo

注意：如果一个元素比包含它的元素高，并且它是浮动的，它将溢出其容器。您可以使用 clearfix hack 来解决此问题（请看下面的例子）。

clearfix Hack

然后我们可以向包含元素添加 overflow: auto;，来解决此问题：

Esempio

.clearfix {
  overflow: auto;
}

Prova da solo

垂直对齐 - 使用 padding

有很多方法可以在 CSS 中垂直对齐元素。一个简单的解决方案是使用上下内边距：

我是垂直居中的。

Esempio

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

Prova da solo

如需同时垂直和水平对齐，请使用 padding 和 text-align: center;：

Sono centrato orizzontalmente e verticalmente.

Esempio

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

Prova da solo

垂直对齐 - 使用 line-height

另一个技巧是使用其值等于 height 属性值的 line-height 属性：

Sono centrato orizzontalmente e verticalmente.

Esempio

.center {
  line-height: 200px;
  altezza: 200px;
  border: 3px solid green;
  text-align: center;
}
/* 如果有多行文本，请添加如下代码：*/
.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}

Prova da solo

垂直对齐 - 使用 position 和 transform

如果您的选择不是 padding 和 line-height，则另一种解决方案是使用 position 和 transform 属性：

Sono centrato orizzontalmente e verticalmente.

Esempio

.center { 
  altezza: 200px;
  position: relative;
  border: 3px solid green; 
}
.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Prova da solo

Suggerimento:Tu troverai Trasformazioni 2D In questa sezione imparerai di più sull'attributo transform.

Allineamento Verticale - Utilizzo Flexbox

Puoi anche utilizzare flexbox per centrare il contenuto. Nota che IE10 e versioni precedenti non supportano flexbox:

Sono centrato orizzontalmente e verticalmente.

Esempio

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

Prova da solo

Suggerimento:Tu troverai nel mio Flexbox CSS In questa sezione imparerai di più su Flexbox.