Penempatan item di halaman web sangat penting untuk desain keseluruhannya. Meskipun ada cara lain untuk memengaruhi tata letak, seperti menggunakan tabel ( yang tidak kami sarankan ), yang terbaik adalah menggunakan CSS .
Di bawah ini, kita akan melihat bagaimana menggunakan properti in-line gaya CSS sederhana untuk menyelaraskan gambar, tabel, paragraf, dan banyak lagi.
Catatan: Metode yang sama ini dapat digunakan pada style sheet eksternal juga, tetapi karena ini berlaku untuk item individual dan mungkin perlu untuk tetap seperti itu, sebaiknya menggunakan penataan in-line seperti yang disebutkan di bawah ini.
Align Text Paragraphs
Tag paragraf adalah tempat pertama untuk memulai dalam meletakkan halaman web Anda. Itu membuka dan menutup tag terlihat seperti ini:
Perataan teks default dalam paragraf adalah di sisi kiri halaman, tetapi Anda juga dapat menyelaraskan paragraf ke kanan dan tengah.
Menggunakan properti float memungkinkan Anda menyelaraskan paragraf ke kanan atau kiri elemen induk. Elemen lain apa pun di dalam elemen induk tersebut akan mengalir di sekitar elemen mengambang.
Untuk mendapatkan efek terbaik dengan paragraf, sebaiknya menetapkan lebar pada paragraf yang lebih kecil dari elemen penampung (induk).
Align the Text Inside Paragraphs
Bisa dibilang, kesejajaran yang paling menarik untuk teks paragraf adalah "membenarkan," yang memberitahu browser untuk menampilkan teks selaras, pada dasarnya, untuk kedua sisi kanan dan kiri jendela.
Untuk membenarkan teks dalam sebuah paragraf, Anda akan menggunakan properti text-align.
Anda juga dapat menyelaraskan semua teks di dalam paragraf ke sisi kanan atau kiri (default), menggunakan properti text-align.
Properti text-align akan menyelaraskan teks di dalam elemen. Secara teknis, itu tidak seharusnya menyelaraskan gambar yang terdapat di dalam paragraf atau elemen lainnya, tetapi sebagian besar browser memperlakukan gambar sebagai inline untuk properti ini.
Menyelaraskan Gambar
Menggunakan properti float pada tag gambar Anda dapat menentukan penempatan gambar pada halaman dan bagaimana teks akan membungkus di sekitar mereka.
Sama seperti paragraf di atas, properti gaya float dalam tag gambar akan memposisikan gambar Anda di halaman dan memberi tahu browser cara mengalirkan teks dan elemen lain di sekitar gambar itu.
Teks mengikuti tag gambar di atas akan mengalir di sekitar gambar ke kanan saat gambar ditampilkan di sebelah kiri layar.
Jika saya ingin teks berhenti membungkus gambar, saya menggunakan properti yang jelas:
Menyelaraskan Lebih dari Paragraf
Namun, bagaimana jika Anda ingin menyelaraskan lebih dari sekadar paragraf atau gambar? Anda cukup menempatkan properti gaya di setiap paragraf, tetapi ada tag yang dapat Anda gunakan yang lebih efektif:
Cukup letakkan teks dan gambar (termasuk tag HTML ) dengan tag dan properti style (float atau text-align) dan semua yang ada di divisi tersebut akan selaras dengan apa yang Anda inginkan.
Perlu diingat bahwa keberpihakan ditambahkan ke paragraf atau gambar dalam divisi akan dihormati, menggantikan tag.