Bagaimana untuk menetapkan pusat fon dalam css

CSS ialah bahasa lembaran gaya berlatarkan yang boleh digunakan dalam reka bentuk dan reka letak web. Apabila mereka bentuk halaman web, adalah sangat penting untuk menggunakan CSS yang betul untuk memusatkan fon, kerana ini memastikan kandungan tapak web lebih mudah dibaca dan difahami, di samping meningkatkan kebolehbacaan dan kebolehcapaian tapak web.

Dalam artikel ini, kami akan meneroka cara memusatkan fon menggunakan CSS, berikut ialah penjelasan terperinci tentang proses tersebut:

1. Cara mencapai teks berpusat

Dalam CSS, terdapat beberapa cara berbeza untuk memusatkan teks, termasuk:

• Gunakan sifat penjajaran teks untuk memusatkan teks secara mendatar.
• Gunakan atribut ketinggian garis untuk memusatkan teks secara menegak.
• Gunakan sifat pelapik dan jidar untuk memusatkan teks secara mendatar dan menegak dalam ruang tersuai.

Di bawah ini kami akan memperkenalkan ketiga-tiga kaedah pelaksanaan ini secara terperinci.

2. Pusat teks secara mendatar

Untuk memusatkan teks secara mendatar, anda boleh menggunakan sifat penjajaran teks dalam CSS. Sifat ini menetapkan penjajaran mendatar teks dalam elemen (biasanya perenggan atau tajuk). Atribut penjajaran teks mempunyai tiga nilai: kiri (dijajarkan ke kiri), kanan (dijajarkan ke kanan) dan tengah (dijajarkan ke tengah). Jika anda mahu teks dipusatkan secara mendatar, cuma tetapkan atribut penjajaran teks ke tengah seperti ini:

/* 将段落文本设置为居中对齐 */
p {text-align:center;}

Selain perenggan, anda juga boleh menggunakan kaedah ini dengan elemen HTML lain, seperti h1 kepada tag h6, badan, dsb.

3. Teks berpusat menegak

Jika anda ingin memusatkan teks secara menegak, anda boleh menggunakan sifat ketinggian garis dalam CSS. Sifat ini menetapkan ketinggian baris teks dalam elemen, dengan itu memusatkan teks secara menegak dengan mengembangkan ketinggian bingkai wayar elemen. Ambil perhatian bahawa apabila menggunakan sifat ini, tetapkan ketinggian baris kepada nilai yang sama dengan ketinggian elemen. Sebagai contoh, jika anda ingin memusatkan secara menegak perenggan teks dengan ketinggian 40 piksel, anda harus menetapkan ketinggian garis kepada 40 piksel, seperti ini:

/* 将段落文本设置为垂直居中 */
p {line-height:40px; height:40px;}

Begitu juga, anda boleh menggunakan kaedah ini dengan elemen HTML yang lain juga.

4. Memusatkan teks dalam ruang tersuai

Untuk memusatkan teks secara mendatar dan menegak dalam ruang tersuai, anda boleh menggunakan atribut padding dan margin. Padding mencipta margin tertentu dalam elemen, manakala margin mencipta margin tertentu di luar elemen. Untuk mencapai ini, anda perlu menetapkan ketinggian dan lebar elemen dan menggunakan sifat seperti margin dan padding, seperti yang ditunjukkan di bawah:

/* 将段落文本居中在一个200像素高宽的容器内 */
.container {
  height:200px;
  width:200px;
  display:flex;
  justify-content:center;
  align-items:center;
  border:1px solid black;
}
.container p {
  padding:20px;
  margin:0;
  text-align:center;
}

Dalam contoh ini, kami telah mencipta bekas dengan ketinggian dan lebar 200 piksel , dan tengahkan teks secara mendatar dan menegak dengan menetapkan atribut paparan kepada flex, atribut justify-content ke tengah dan atribut align-item ke tengah.

Ringkasan:

Dalam reka bentuk web, menggunakan teknik CSS yang sesuai membolehkan anda memusatkan teks secara mendatar dan menegak dengan mudah. Untuk setiap blok teks, memilih kaedah yang betul bergantung pada rupa yang ingin anda capai dan jenis elemen HTML yang digunakan. Walau apa pun, ingat untuk sentiasa mengujinya untuk keserasian dan kebolehaksesan sebelum menggunakannya untuk memastikan tapak anda berprestasi baik merentas pelbagai penyemak imbas dan peranti.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan pusat fon dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!