Layout CSS - Rata horizontal dan vertikal

elemen yang menengahkan

elemen yang menengahkan secara horizontal dan vertikal

menengahkan elemen

Untuk membuat elemen blok (seperti <div>) menengahkan secara horizontal, gunakan margin: auto;.

Mengatur lebar elemen akan mencegahnya meluas ke ujung bingkai kontainer.

Lalu, elemen akan mengambil lebar yang ditentukan, sisa ruang akan dibagi rata di antara dua marjin luar:

elemen div ini adalah yang menengahkan.

Contoh

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

Coba Sendiri

注意：Jika belum diatur width properti (atau aturnya menjadi 100%), penengahan teks tidak akan berfungsi.

menengahkan teks

Jika hanya ingin menengahkan teks di dalam elemen, gunakan text-align: center;：

teks ini adalah yang menengahkan.

Contoh

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

Coba Sendiri

Petunjuk:Untuk contoh lebih lanjut tentang bagaimana menengahkan teks, lihat Teks CSS di bab ini.

menengahkan gambar

Jika ingin menengahkan gambar, silakan atur marjin samping kiri dan kanan auto，并将其设置为块元素：

Contoh

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

Coba Sendiri

左和右对齐 - 使用 position

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

这个 div 是右对齐的。

Contoh

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

Coba Sendiri

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

左和右对齐 - 使用 float

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

Contoh

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

Coba Sendiri

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

clearfix Hack

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

Contoh

.clearfix {
  overflow: auto;
}

Coba Sendiri

垂直对齐 - 使用 padding

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

我是垂直居中的。

Contoh

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

Coba Sendiri

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

Saya ditempatkan di tengah secara horizontal dan vertikal.

Contoh

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

Coba Sendiri

垂直对齐 - 使用 line-height

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

Saya ditempatkan di tengah secara horizontal dan vertikal.

Contoh

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

Coba Sendiri

垂直对齐 - 使用 position 和 transform

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

Saya ditempatkan di tengah secara horizontal dan vertikal.

Contoh

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

Coba Sendiri

Petunjuk:Anda akan mendapatkan Transformasi 2D Anda akan belajar lebih banyak tentang properti transform di bab ini.

Perataan Vertikal - Menggunakan Flexbox

Anda juga dapat menggunakan flexbox untuk menempatkan konten di tengah. Perhatikan bahwa IE10 dan versi yang lebih awal tidak mendukung flexbox:

Saya ditempatkan di tengah secara horizontal dan vertikal.

Contoh

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

Coba Sendiri

Petunjuk:Anda akan mendapatkan Flexbox CSS Anda akan belajar lebih banyak tentang Flexbox di bab ini.