Layout CSS - Penempatan Horizontal dan Vertikal

elemen menengah

elemen yang menengah secara horizontal dan vertikal

menengahkan elemen

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

Mengatur lebar elemen akan mencegahnya menyebar ke luar pinggir kontainer.

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

elemen div ini adalah menengah.

Contoh

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

Cuba sendiri

注意：Jika belum diatur lebar 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 menengah.

Contoh

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

Cuba sendiri

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

menengahkan gambar

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

Contoh

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

Cuba sendiri

左和右对齐 - 使用 position

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

这个 div 是右对齐的。

Contoh

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

Cuba sendiri

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

左和右对齐 - 使用 float

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

Contoh

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

Cuba sendiri

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

clearfix Hack

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

Contoh

.clearfix {
  overflow: auto;
}

Cuba sendiri

垂直对齐 - 使用 padding

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

我是垂直居中的。

Contoh

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

Cuba sendiri

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

Saya terletak di tengah secara horizontal dan vertikal.

Contoh

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

Cuba sendiri

垂直对齐 - 使用 line-height

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

Saya terletak 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;
}

Cuba sendiri

垂直对齐 - 使用 position 和 transform

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

Saya terletak 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%);
}

Cuba sendiri

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

Jadual Rata Atas - Menggunakan Flexbox

Anda juga boleh menggunakan flexbox untuk menengahkan kandungan. Perhatikan, IE10 dan versi sebelumnya tidak mendukung flexbox:

Saya terletak di tengah secara horizontal dan vertikal.

Contoh

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

Cuba sendiri

Panduan:Anda akan dalam Flexbox CSS Anda akan belajar lebih banyak tentang Flexbox di bab ini.