Di Tailwind CSS, elemen yang diganti adalah elemen yang isinya diganti oleh sumber daya eksternal, seperti gambar dan video. Terkadang, pengguna menghadapi tantangan untuk memposisikan elemen yang diganti di dalam wadah. Ini karena elemen-elemen ini dapat meluap dari wadah jika ukurannya lebih besar dari ruang yang tersedia. Tailwind CSS menyediakan kelas utilitas untuk mengontrol bagaimana konten dari elemen yang diganti diposisikan dan disejajarkan di dalam penampung.
Artikel ini akan mengilustrasikan metode untuk memposisikan elemen yang diganti dalam penampung di Tailwind CSS.
Bagaimana Memposisikan Elemen yang Diganti di Dalam Penampung di Tailwind?
Untuk memosisikan elemen yang diganti dalam penampung di Tailwind, buat program HTML dan gunakan tombol “ objek-
Sintaksis
< elemen kelas = 'objek-
Contoh
Dalam contoh ini, kami akan membuat wadah dan menggunakan semua “ objek- ” (gambar) elemen untuk menentukan posisinya yang diganti dalam wadah:
< tubuh >
< div kelas = 'bg-sky-300 grid grid-rows-3 grid-flow-col m-5 space-y-4 p-4 justify-between' >
< img kelas = 'objek-tidak ada objek-kiri-atas w-24 jam-24 saya-4' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img kelas = 'objek-tidak ada objek-kiri w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img kelas = 'objek-tidak ada objek-kiri-bawah w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img kelas = 'objek-tidak ada objek-atas w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img kelas = 'objek-tidak ada objek-pusat w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img kelas = 'objek-tidak ada objek-bawah w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img kelas = 'objek-tidak ada objek-kanan-atas w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img kelas = 'objek-tidak ada objek-kanan w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img kelas = 'objek-tidak ada objek-kanan-bawah w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
div >
tubuh >
Di sini, di elemen
- “ bg-langit-300 ” mengatur warna latar belakang wadah menjadi langit.
- “ kisi ” kelas memungkinkan tata letak kisi.
- “ kisi-baris-3 ” kelas mengatur nomor baris dalam kisi menjadi 3.
- “ grid-flow-col ” kelas mendefinisikan aliran item kisi dalam kolom.
- “ m-5 ” kelas menambahkan 5 unit margin di sekitar wadah.
- “ ruang-y-4 ” kelas menambahkan jarak vertikal 4 unit antara elemen
anak di dalam wadah.
- “ hal-4 ” class menambahkan 4 unit padding ke konten di dalam container.
- “ membenarkan-antara ” kelas menyelaraskan elemen anak di dalam wadah dan mendistribusikannya secara merata.
Dalam elemen
:
- “ objek-tidak ada ” kelas tidak menerapkan posisi apa pun ke elemen dan menampilkan elemen pada posisi defaultnya di wadah.
- “ objek-kiri-atas ” kelas memposisikan elemen
ke sudut kiri atas penampungnya.
- “ objek-kiri ” kelas menyelaraskan elemen ke tepi kiri wadah dan menjaganya tetap terpusat secara vertikal.
- “ objek-kiri-bawah ” kelas memposisikan elemen
ke sudut kiri bawah wadahnya.
- “ objek-atas ” kelas memposisikan elemen di tepi atas wadahnya dan mengaturnya di tengah secara horizontal.
- “ pusat objek ” kelas memposisikan elemen di tengah wadah dan menjaganya tetap terpusat secara horizontal dan vertikal.
- “ objek-bawah ” kelas memposisikan elemen di tepi bawah wadahnya dan menjaganya tetap di tengah secara horizontal.
- “ objek-kanan-atas ” kelas memposisikan elemen
ke sudut kanan atas wadah.
- “ objek-kanan ” kelas memposisikan elemen ke tepi kanan wadahnya dan menjaganya tetap terpusat secara vertikal.
- “ objek-kanan-bawah ” kelas memposisikan elemen ke sudut kanan bawah wadahnya.
Keluaran
Di halaman web di atas, terlihat bahwa semua konten elemen yang diganti telah berhasil diposisikan.
Kesimpulan
Untuk memosisikan elemen yang diganti dalam penampung di Tailwind, tombol “ objek-
Utilitas digunakan dengan elemen yang diinginkan, seperti gambar. Pengguna perlu menentukan posisi atau sisi tertentu yaitu kiri, kanan, atau tengah dalam utilitas 'objek- ' untuk memposisikan elemen yang diganti. Artikel ini telah mengilustrasikan metode untuk memposisikan elemen yang diganti dalam penampung di Tailwind CSS.