Petua CSS3: Aplikasi berpusat secara mendatar bagi atribut kandungan muat

Petua CSS3: aplikasi pemusatan mendatar atribut fit-content

Apabila mereka bentuk halaman web, kita sering menghadapi situasi di mana elemen perlu dipusatkan secara mendatar. Dalam CSS3, kita boleh menggunakan atribut fit-content untuk mencapai pemusatan mendatar. Atribut fit-content mentakrifkan lebar elemen yang paling sesuai dengan kandungan Ia melaraskan lebar elemen secara automatik berdasarkan kandungan di dalam elemen. Seterusnya, mari kita lihat cara menggunakan atribut fit-content untuk mencapai kesan pemusatan mendatar.

Pertama, kita memerlukan elemen yang mengandungi kandungan. Katakan kita mempunyai div bekas dan rentang elemen teks di dalamnya. Matlamat kami adalah untuk memusatkan elemen span secara mendatar dalam div.

Kod HTML kelihatan seperti ini:

<div class="container">
  <span class="content">Hello, CSS3</span>
</div>

Seterusnya, kita perlu menambah beberapa penggayaan asas kepada elemen ini. Kami akan menggunakan susun atur fleksibel untuk mencapai pemusatan mendatar.

Kod CSS adalah seperti berikut:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  background-color: #f2f2f2;
}

.content {
  background-color: #fff;
  padding: 10px;
}

Mula-mula, kami menetapkan atribut paparan elemen .container kepada lentur, supaya kami boleh menggunakan reka letak fleksibel untuk mengawal penjajaran elemen anak. Kami kemudian menggunakan atribut justify-content untuk memusatkan kandungan secara mendatar. Atribut align-item digunakan untuk pemusatan menegak. Dalam contoh ini, kami menetapkan ketinggian bekas kepada 200px dan memberikannya warna latar belakang.

Seterusnya, kita perlu menambah gaya pada elemen .content. Dalam contoh ini, kami menetapkan warna latar belakang kandungan kepada putih dan menambah beberapa pelapik supaya kami dapat melihat sempadan kandungan.

Sekarang, jika anda membuka halaman web ini dalam penyemak imbas anda, anda akan melihat bahawa kandungan berada di tengah-tengah mendatar di tengah-tengah bekas.

Namun, jika kandungan terlalu panjang, ia akan membalut secara automatik dan lebar bekas akan menyesuaikan secara automatik mengikut kandungan. Ini mungkin bukan kesan yang kita mahukan.

Untuk menyelesaikan masalah ini, kita boleh menggunakan atribut fit-content.

Ubah suai kod CSS seperti berikut:

.content {
  background-color: #fff;
  padding: 10px;
  width: fit-content;
}

Kami menetapkan atribut lebar elemen .content kepada muat-kandungan. Dengan cara ini ia akan melaraskan lebarnya berdasarkan lebar kandungan.

Sekarang, jika anda membuka penyemak imbas anda dan menyemak halaman web ini, anda akan mendapati bahawa kandungan tidak lagi dibungkus, tetapi dipaparkan sepenuhnya dalam satu baris. Selain itu, lebar bekas hanya akan dilaraskan mengikut lebar kandungan, dan bukannya menduduki keseluruhan bekas induk.

Beginilah cara menggunakan atribut fit-content untuk mencapai kesan pemusatan mendatar.

Ringkasan
Dalam reka bentuk web, kita sering menghadapi situasi di mana kita perlu memusatkan elemen secara mendatar. Sifat fit-content CSS3 memberikan kita cara mudah untuk mencapai kesan pemusatan mendatar. Dengan menetapkan lebar elemen agar sesuai dengan kandungan, kami boleh melaraskan lebar elemen secara automatik berdasarkan lebar kandungan.

Saya harap artikel ini dapat membantu anda memahami penggunaan atribut fit-content dan teknik pelaksanaan pemusatan mendatar. Dalam pembangunan sebenar, anda boleh menggunakan atribut ini secara fleksibel mengikut keperluan anda sendiri untuk mencipta reka bentuk web yang lebih cemerlang.

Atas ialah kandungan terperinci Petua CSS3: Aplikasi berpusat secara mendatar bagi atribut kandungan muat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!