Bagaimanakah Saya Boleh Memusatkan Teks Pada Imej Menggunakan Flexbox dan Kedudukan CSS?

Pusat Teks Atas Imej dalam Flexbox dan Kedudukan CSS

Memusatkan teks pada imej ialah keperluan reka letak biasa. Walaupun Flexbox menawarkan pilihan penjajaran yang berkuasa, anda juga boleh mencapai kesan ini dengan sifat kedudukan CSS.

Menggunakan Kedudukan Mutlak

Untuk memusatkan teks pada imej menggunakan kedudukan mutlak:

body {
  position: relative;
}
...
.text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

• Tetapkan nilai kedudukan statik untuk badan untuk menubuhkan nenek moyang kedudukan untuk mutlak kedudukan.
• Letakkan elemen teks secara mutlak.
• Pusat teks secara mendatar dengan kiri: 50%; dan tengahkannya secara menegak dengan bahagian atas: 50%;.
• Gunakan transformasi untuk memperhalusi pemusatan dengan menterjemahkannya separuh lebar dan tingginya.

Menggunakan Flexbox

Sebagai alternatif, Flexbox boleh digunakan untuk kedua-dua imej dan teks kedudukan:

body {
  margin: 0px;
}
...
.height-100vh {
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}
...
.text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
}
.center-aligned {
  display: flex;
  align-items: center;
  justify-content: center;
}

• Balutkan kedua-dua imej dan elemen teks dalam bekas Flexbox dengan sifat ketinggian.
• Tetapkan item penjajaran: tengah; dan justify-content: pusat; untuk menjajarkan item secara menegak dan mendatar dalam bekas.
• Letakkan elemen teks secara mutlak dalam bekas dan gayakannya seperti yang dikehendaki.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memusatkan Teks Pada Imej Menggunakan Flexbox dan Kedudukan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!