Bagaimana untuk menetapkan gaya pemusatan dengan CSS? Analisis ringkas kaedah

CSS ialah salah satu bahasa helaian gaya yang paling biasa digunakan dalam reka bentuk web. Ia bukan sahaja boleh menukar warna, fon, saiz dan atribut lain elemen halaman web, tetapi juga mencapai fungsi seperti pemusatan dan reka letak. Dalam reka bentuk web, pemusatan elemen adalah sangat penting, jadi artikel ini akan memperkenalkan anda kepada cara menggunakan CSS untuk menetapkan gaya pemusatan.

1. Pemusatan teks

Dalam reka bentuk web, pemusatan teks ialah kaedah pemusatan yang sangat biasa, yang boleh menjadikan reka letak halaman web lebih kemas dan lebih cantik Kaedah utama menetapkan pemusatan teks dalam CSS ialah Terdapat dua jenis:

1. Pemusatan mendatar

Kaedah untuk menetapkan pemusatan mendatar teks dalam CSS adalah sangat mudah, cuma tambah text-align:center pada label . Mencapai pemusatan mendatar teks. Contohnya:

Pemusatan mendatar bagi teks

2. Pemusatan menegak

Berbanding dengan pemusatan mendatar, pemusatan menegak kurang digunakan dalam reka bentuk web, tetapi dalam beberapa senario tertentu, seperti elemen terapung dengan pengalaman responsif, pemusatan menegak boleh memainkan peranan penting. Biasanya terdapat kaedah berikut untuk mencapai pemusatan menegak dalam CSS:

(1) Pelaksanaan melalui padding

Kaedah ini adalah menggunakan atribut padding untuk mengurangkan ruang dalaman elemen dengan sewajarnya (kedua-duanya atas dan bawah boleh ), supaya pusat elemen diselaraskan dengan ketinggian sebaris (tetapkan margin elemen kepada auto, supaya pemusatan menegak boleh dicapai). Contohnya:

Pemusatan menegak teks

Nota: Di sini 50 % ialah peratusan berbanding ketinggian elemen induk (iaitu jarak dari bahagian atas elemen semasa ke bahagian atas elemen induk menyumbang 50% ketinggian keseluruhan elemen induk), dan -10px ialah separuh daripada ketinggian unsur semasa. Menetapkan ini akan memusatkan teks secara menegak.

(2) Dengan menetapkan ketinggian baris

Dalam CSS, anda boleh menggunakan ketinggian baris untuk mencapai pemusatan menegak Kaedah ini juga agak mudah kotak itu. Contohnya:

Memusatkan teks secara menegak

2 🎜>Pemusatan imej juga merupakan kaedah pemusatan yang penting dalam reka bentuk web, dan ia boleh dilaksanakan dengan mudah dalam CSS. Kaedah khusus adalah seperti berikut:

Berpusat secara mendatar

1. Untuk mencapai pemusatan mendatar imej, cuma tetapkan lebar bekas di luar imej kepada 100% dan lebar imej kepada lebar sebenar Itu sahaja. Contohnya:

Selepas menetapkan ini, anda boleh memusatkan imej secara mendatar.

Pemusatan menegak

2. Untuk mencapai pemusatan menegak imej, kaedahnya serupa dengan pemusatan menegak teks Anda boleh menggunakan ketinggian garisan atau padding untuk mencapainya. Contohnya:

(1) Gunakan line-height:

(2) Gunakan padding:

Nota: 50% di sini ialah peratusan berbanding ketinggian unsur induk ( iaitu, elemen semasa Jarak dari bahagian atas ke bahagian atas elemen induk menyumbang 50% daripada ketinggian keseluruhan elemen induk), dan -250px ialah separuh ketinggian unsur semasa. Tetapan ini akan memusatkan imej secara menegak.

Ringkasan:

Di atas ialah cara menetapkan pemusatan dalam CSS, kedua-dua teks dan imej boleh dipusatkan secara mendatar dan menegak melalui atribut seperti penjajaran teks, ketinggian garis dan padding. Dalam reka bentuk web, pemusatan adalah sangat penting Saya berharap melalui pengenalan artikel ini, pembaca dapat menguasai kemahiran menetapkan pemusatan dalam CSS dan mencapai kesan reka bentuk web dengan lebih baik.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan gaya pemusatan dengan CSS? Analisis ringkas kaedah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!