Bagaimana untuk Memusatkan Kandungan Secara Menegak Dalam Div dengan Dimensi Ditentukan?

Memusatkan Kandungan Secara Menegak Dalam Div dengan Dimensi Ditentukan

Apabila bekerja dengan div dengan lebar dan ketinggian yang dipratentukan, menjajarkan kandungannya secara menegak boleh cabaran bersama. Seseorang memerlukan kaedah yang berkesan memusatkan kandungan dengan ketinggian yang berbeza-beza.

Penyelesaian:

1. Div Induk sebagai Sel Jadual:

Tetapkan paparan div induk kepada sel jadual. Ini menghapuskan keperluan untuk sel jadual pada kandungan itu sendiri:

.area {
  display: table-cell;
  vertical-align: middle;
}

2. Div Induk sebagai Blok, Div Kandungan sebagai Sel Jadual:

Tetapkan paparan div induk untuk disekat dan paparan div kandungan ke sel jadual:

.area {
  display: block;
}

.content {
  display: table-cell;
  vertical-align: middle;
}

3. Div Induk Terapung, Div Kandungan sebagai Sel Jadual:

Tetapkan div induk untuk terapung dan div kandungan sebagai sel jadual. Ini memerlukan pertimbangan yang teliti terhadap margin:

.area {
  float: left;
}

.content {
  display: table-cell;
  vertical-align: middle;
}

4. Relatif Kedudukan Div Induk, Div Kandungan Diposisikan Mutlak:

Tetapkan kedudukan div induk kepada relatif dan kedudukan div kandungan kepada mutlak. Tentukan ketinggian kandungan dan tetapkan margin atas kepada separuh daripada ketinggian kandungan. Penyelesaian ini memerlukan pelarasan manual untuk setiap kes:

.area {
  position: relative;
}

.content {
  position: absolute;
  top: 50%;
  height: 50%;
  margin-top: -25%;
}

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Kandungan Secara Menegak Dalam Div dengan Dimensi Ditentukan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!