Pusatkan gambar, teks, dan blokir elemen saat membuat situs web
Jika Anda sedang mempelajari cara membuat situs web , salah satu trik paling umum yang perlu Anda kuasai adalah cara memusatkan item di jendela browser. Ini bisa berarti memusatkan gambar pada halaman, atau bisa juga merupakan teks pembenaran tengah seperti judul sebagai bagian dari desain.
Cara yang tepat untuk mencapai tampilan visual dari gambar atau teks yang terpusat atau bahkan seluruh halaman web Anda adalah dengan menggunakan Cascading Style Sheets (CSS) . Sebagian besar properti untuk pemusatan telah ada di CSS sejak versi 1.0, dan mereka bekerja dengan baik dengan CSS3 dan browser web modern.
Seperti banyak aspek desain web, ada banyak cara menggunakan CSS untuk memusatkan elemen di halaman web. Mari kita lihat beberapa cara berbeda untuk menggunakan CSS untuk mencapai tampilan visual ini.
Sekilas tentang Menggunakan CSS ke Elemen Center dalam HTML
Berpusat dengan CSS dapat menjadi tantangan bagi para perancang web pemula karena ada begitu banyak cara berbeda untuk mencapai gaya visual yang satu ini. Sementara berbagai metode mungkin bagus atau pengembang web berpengalaman yang tahu bahwa tidak semua teknik bekerja pada setiap elemen, ini bisa sangat menantang bagi para profesional web yang lebih baru karena berbagai macam metode berarti mereka perlu tahu kapan menggunakan pendekatan apa. Hal terbaik untuk dilakukan adalah mendapatkan pemahaman tentang beberapa pendekatan. Ketika Anda mulai menggunakannya, Anda akan belajar metode mana yang berfungsi paling baik di mana instance.
Pada tingkat tinggi, Anda dapat menggunakan CSS untuk:
- Teks tengah
- Tengahkan elemen tingkat-blok (seperti divisi)
- Pusatkan gambar
- Pusatkan secara vertikal blok atau gambar
Banyak (banyak) tahun yang lalu, perancang web dapat menggunakan elemen
Teks Centering dengan CSS
Hal termudah untuk berpusat pada halaman web adalah teks. Hanya ada satu properti gaya yang perlu Anda ketahui untuk melakukan ini: text-align. Ambil gaya CSS di bawah ini, misalnya:
p.center {text-align: center; }
Dengan baris CSS ini, setiap paragraf yang ditulis dengan kelas pusat akan dipusatkan secara horizontal di dalam elemen induknya. Sebagai contoh, jika paragraf berada di dalam sebuah divisi, yang berarti itu adalah anak dari divisi itu, itu akan terpusat secara horizontal di dalam
Berikut contoh kelas ini yang diterapkan dalam dokumen HTML:
Teks ini dipusatkan.
Ketika memusatkan teks dengan properti text-align, ingat bahwa itu akan berpusat di dalam elemen yang mengandung dan tidak perlu terpusat di dalam halaman lengkap itu sendiri. Juga ingat bahwa teks yang dibenarkan tengah bisa sulit dibaca untuk blok konten yang besar, jadi gunakan gaya ini dengan hemat. Judul dan blok kecil teks, seperti teks promosi untuk artikel atau konten lainnya, sering kali mudah dibaca dan bagus saat terpusat, tetapi blok teks yang lebih besar, seperti artikel lengkapnya, akan sulit untuk dikonsumsi jika konten sepenuhnya berada di tengah dibenarkan. Ingat, keterbacaan selalu kunci ketika datang ke teks situs web!
Memusatkan Blok Konten dengan CSS
Blok adalah elemen apa pun di halaman Anda yang memiliki lebar yang ditentukan dan ditetapkan sebagai elemen tingkat blok. Seringkali, blok ini dibuat dengan menggunakan elemen HTML
div.center {
margin: 0 otomatis;
width: 80em;
}
Ini singkatan CSS untuk properti margin akan mengatur margin atas dan bawah ke nilai 0, sedangkan kiri dan kanan akan menggunakan "otomatis." Ini pada dasarnya mengambil ruang yang tersedia dan membagi secara merata antara kedua sisi jendela viewport, secara efektif memusatkan elemen pada halaman.
Di sini diterapkan dalam HTML:
tetapi teks di dalamnya disejajarkan.
Selama blok Anda memiliki lebar yang ditentukan, itu akan memusatkan diri di dalam elemen yang mengandung. Teks yang terdapat di blok itu tidak akan terpusat di dalamnya, tetapi akan dibenarkan-kiri. Ini karena teks dibiarkan dibenarkan di default di browser web. Jika Anda menginginkan teks tersebut terpusat juga, Anda bisa menggunakan properti text-align yang kami bahas sebelumnya dalam hubungannya dengan metode ini untuk memusatkan divisi.
Memusatkan Gambar dengan CSS
Sementara sebagian besar browser akan menampilkan gambar yang terpusat menggunakan properti text-align yang sama yang telah kita bahas untuk paragraf, bukanlah ide yang baik untuk mengandalkan teknik itu karena tidak direkomendasikan oleh W3C . Karena tidak disarankan, selalu ada kemungkinan versi browser masa depan dapat memilih untuk mengabaikan metode ini.
Alih-alih menggunakan text-align untuk memusatkan gambar, Anda harus secara eksplisit memberi tahu browser bahwa gambar adalah elemen tingkat blok. Dengan cara ini, Anda dapat memusatkannya seperti yang Anda lakukan pada blok lainnya. Berikut ini CSS untuk membuat ini terjadi:
img.center {
display: block;
margin-left: auto;
margin-kanan: otomatis;
}
Dan inilah HTML yang untuk gambar yang ingin kita pusatkan:
Anda juga dapat memusatkan objek menggunakan CSS in-line (lihat di bawah), tetapi pendekatan ini TIDAK disarankan karena menambahkan gaya visual ke dalam markup HTML Anda. Ingat, kami ingin memisahkan gaya dan struktur, sehingga menambahkan gaya CSS ke kode HTML Anda dengan memecah pemisahan itu dan, dengan demikian, harus dihindari sebisa mungkin.
Memusatkan Elemen Secara Vertikal dengan CSS
Memusatkan objek secara vertikal selalu menantang dalam desain web, tetapi dengan dirilisnya CSS Flexible Box Layout Module di CSS3, sekarang ada cara untuk melakukannya.
Perataan vertikal bekerja sama dengan perataan horizontal yang dibahas di atas. Properti CSS adalah vertikal-sejajar dengan nilai tengah.
.vcenter {
vertical-align: tengah;
}
Kelemahan dari pendekatan ini adalah tidak semua browser mendukung CSS FlexBox, meskipun semakin banyak yang datang ke metode layout CSS baru ini! Bahkan, semua browser modern sekarang mendukung gaya CSS ini. Ini berarti bahwa satu-satunya masalah Anda dengan Flexbox adalah versi browser yang jauh lebih tua.
Jika Anda memiliki masalah dengan browser lama, W3C menyarankan Anda untuk memusatkan teks secara vertikal dalam sebuah wadah menggunakan metode berikut:
- Tempatkan elemen-elemen yang akan berpusat di dalam elemen yang mengandung, seperti div.
- Setel ketinggian minimum pada elemen yang mengandung.
- Deklarasikan bahwa mengandung elemen sebagai sel tabel.
- Atur perataan vertikal ke "tengah."
Sebagai contoh, di sini adalah CSS:
.vcenter {
min-height: 12em;
display: table-cell;
vertical-align: tengah;
}
Dan di sini adalah HTML:
Teks ini secara vertikal di tengah kotak.
Vertical Centering dan Versi Lama dari Internet Explorer
Ada beberapa cara untuk memaksa Internet Explorer (IE) untuk memusatkan dan kemudian menggunakan komentar bersyarat sehingga hanya IE yang melihat gaya, tetapi mereka sedikit verbose dan jelek. Kabar baiknya adalah bahwa dengan keputusan Microsoft baru-baru ini untuk menghentikan dukungan untuk versi IE yang lebih lama, browser yang tidak mendukung itu harus segera keluar, sehingga memudahkan desainer web untuk menggunakan pendekatan tata letak modern seperti CSS FlexBox yang akan membuat semua tata letak CSS, bukan hanya berpusat, lebih mudah bagi semua desainer web.