Imej pusat, teks, dan elemen blok semasa membina laman web
Jika anda belajar bagaimana untuk membina laman web , salah satu helah paling biasa yang anda perlukan untuk menguasai ialah cara memusatkan item dalam tetingkap penyemak imbas. Ini mungkin bermaksud memusatkan imej pada halaman, atau ia boleh menjadi teks yang membenarkan teks sebagai tajuk sebagai sebahagian daripada reka bentuk.
Cara yang tepat untuk mencapai rupa visual ini imej atau teks berpusat atau laman web keseluruhan anda adalah menggunakan Cascading Style Sheets (CSS) . Kebanyakan sifat untuk memusatkan telah berada di CSS sejak versi 1.0, dan mereka bekerja hebat dengan CSS3 dan penyemak imbas web moden.
Seperti banyak aspek reka bentuk web, terdapat banyak cara untuk menggunakan CSS ke elemen pusat dalam laman web. Mari kita lihat beberapa cara yang berbeza untuk menggunakan CSS untuk mencapai rupa visual ini.
Pada Tinjauan Menggunakan CSS ke Elemen Pusat dalam HTML
Memusatkan dengan CSS boleh menjadi cabaran untuk memulakan pereka web kerana terdapat begitu banyak cara yang berbeza untuk mencapai gaya visual yang satu ini. Walaupun pelbagai kaedah boleh menjadi pemaju web yang bagus atau berpengalaman yang tahu bahawa tidak semua teknik bekerja pada setiap elemen, ini boleh menjadi sangat mencabar untuk profesional web yang lebih baru kerana pelbagai jenis kaedah bermakna mereka perlu tahu kapan menggunakan pendekatan mana. Perkara terbaik yang perlu dilakukan adalah untuk mendapatkan pemahaman mengenai beberapa pendekatan. Apabila anda mula menggunakannya, anda akan mempelajari kaedah mana yang paling sesuai untuk digunakan.
Pada tahap yang tinggi, anda boleh menggunakan CSS untuk:
- Teks pusat
- Pusat elemen peringkat blok (seperti bahagian)
- Pusat imej
- Menegakkan blok atau imej secara menegak
Ramai (banyak) tahun yang lalu, pereka web boleh menggunakan elemen
Memusatkan Teks dengan CSS
Perkara paling mudah untuk memusatkan pada laman web adalah teks. Terdapat hanya satu gaya hartanah yang anda perlu tahu untuk melakukan ini: jajaran teks. Ambil gaya CSS di bawah, contohnya:
p.center {text-align: center; }
Dengan baris CSS ini, setiap perenggan yang ditulis dengan kelas pusat akan berpusat secara mendatar di dalam elemen induknya. Contohnya, jika perenggan itu berada di dalam bahagian, bermakna ia adalah anak bahagian itu, ia akan berpusat secara mendatar di dalam
Berikut adalah contoh kelas ini yang digunakan dalam dokumen HTML:
Teks ini berpusat.
Apabila memusatkan teks dengan harta selaras teks, ingatlah bahawa ia akan berpusat dalam unsur yang mengandunginya dan tidak semestinya berpusat di dalam halaman penuh itu sendiri. Ingat juga bahawa teks yang dibenarkan di tengah-tengah boleh sukar dibaca untuk blok kandungan yang besar, jadi gunakan gaya ini dengan berhati-hati. Tajuk tajuk dan teks kecil, seperti teks penggoda untuk artikel atau kandungan lain, sering mudah dibaca dan halus apabila tertumpu, tetapi teks yang lebih besar, seperti artikel penuh itu sendiri, akan mencabar untuk digunakan jika kandungannya sepenuhnya wajar. Ingat, kebolehbacaan selalu menjadi kunci ketika datang ke teks laman web!
Memusatkan Blok Kandungan dengan CSS
Blok adalah sebarang unsur di halaman anda yang mempunyai lebar yang ditetapkan dan ditetapkan sebagai elemen peringkat blok. Sering kali, blok ini dibuat dengan menggunakan HTML
div.center {
margin: 0 auto;
lebar: 80em;
}
Ketinggalan CSS ini untuk harta margin akan menetapkan margin atas dan bawah kepada nilai 0, manakala kiri dan kanan akan menggunakan "auto." Ini pada dasarnya memerlukan ruang yang tersedia dan membahagi secara sama rata di antara dua sisi tetingkap viewport, dengan berkesan memusatkan elemen pada halaman.
Di sini ia digunakan dalam HTML:
tetapi teks di dalamnya dibiarkan sejajar.
Selagi blok anda mempunyai lebar yang ditetapkan, ia akan memusatkan dirinya dalam elemen yang mengandungi. Teks yang terkandung di dalam blok itu tidak akan tertumpu di dalamnya, tetapi akan dibenarkan. Ini kerana teks dibiarkan-dibenarkan dalam lalai dalam pelayar web. Sekiranya anda mahukan teks yang tertumpu juga, anda boleh menggunakan teks-align property yang kita tutup lebih awal bersamaan dengan kaedah ini untuk memusatkan bahagian.
Memusatkan Imej dengan CSS
Walaupun kebanyakan penyemak imbas akan memaparkan imej yang berpusatkan menggunakan menggunakan teks-align property yang telah kita lihat untuk perenggan itu, bukanlah idea yang baik untuk bergantung pada teknik itu kerana tidak disyorkan oleh W3C . Oleh kerana tidak disyorkan, selalu ada kemungkinan versi pelayar versi masa depan dapat memilih untuk mengabaikan kaedah ini.
Daripada menggunakan jajaran teks untuk memusatkan imej, anda harus memberitahu penyemak imbas secara terang-terangan bahawa imej itu adalah elemen peringkat blok. Dengan cara ini, anda boleh memusatkannya seperti yang anda mahu blok lain. Berikut adalah CSS untuk membuat ini berlaku:
img.center {
paparan: blok;
margin-left: auto;
margin-right: auto;
}
Dan inilah HTML yang untuk imej yang kami ingin dipusatkan:
Anda juga boleh memusat objek menggunakan CSS dalam talian (lihat di bawah), tetapi pendekatan ini TIDAK disarankan kerana ia menambahkan gaya visual ke dalam markup HTML anda. Ingat, kami mahu memisahkan gaya dan struktur, jadi menambah gaya CSS ke kod HTML anda dengan memecahkan pemisahan itu dan, oleh itu, ia harus dielakkan apabila mungkin.
Elemen Pusat Menegak dengan CSS
Menentas objek secara menegak selalu mencabar dalam reka bentuk web, tetapi dengan pembebasan Modul Layout CSS Flexible Box dalam CSS3, kini ada cara untuk melakukannya.
Jajaran vertikal berfungsi sama seperti penjajaran mendatar yang diliputi di atas. Hartanah CSS adalah menegak-menegak dengan nilai pertengahan.
.vcenter {
menegak-align: tengah;
}
Kelemahan pendekatan ini adalah bahawa tidak semua pelayar menyokong CSS FlexBox, walaupun semakin banyak datang ke kaedah susunatur CSS yang baru! Sebenarnya, semua pelayar moden hari ini menyokong gaya CSS ini. Ini bermakna kebimbangan anda hanya dengan Flexbox akan menjadi versi pelayar yang lebih lama.
Sekiranya anda mempunyai masalah dengan penyemak imbas yang lebih lama, W3C mengesyorkan bahawa anda menentusahkan teks menegak dalam bekas menggunakan kaedah berikut:
- Letakkan unsur-unsur yang akan berpusat di dalam unsur yang mengandungi, seperti div.
- Tetapkan ketinggian minimum pada unsur yang mengandungi.
- Nyatakan yang mengandungi unsur sebagai sel jadual.
- Tetapkan penjajaran menegak ke "tengah."
Sebagai contoh, di sini adalah CSS:
.vcenter {
min ketinggian: 12em;
paparan: meja-sel;
menegak-align: tengah;
}
Dan inilah HTML:
Teks ini secara vertikal berpusat di dalam kotak.
Pusat Menegak dan Versi Lama Internet Explorer
Terdapat beberapa cara untuk memaksa Internet Explorer (IE) untuk memusatkan dan kemudian menggunakan ulasan bersyarat supaya hanya IE melihat gaya, tetapi mereka agak kasar dan hodoh. Berita baiknya ialah dengan keputusan Microsoft baru-baru ini untuk menggugurkan sokongan untuk versi IE yang lebih lama, penyemak imbas yang tidak disokong harus segera dikeluarkan, menjadikannya mudah bagi pereka web untuk menggunakan pendekatan tata letak moden seperti CSS FlexBox yang akan menjadikan semua susun atur CSS, bukan hanya berpusat, lebih mudah untuk semua pereka web.