Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Centering object vertically
Saya ingin "menengahkan" secara vertical pada menu-menu tersebut, di sini saya menggunakan tailwind css, sudah membaca-baca artikel dan dokumentasi yang ada, sayangnya belum berubah ke tengah juga
gambar.png
Tanggapan
Baca aturan main di forum ini ya, sertakan kode atau gambar jika perlu
2 Jawaban:
<div>setauku bisa dengan ini</div><pre><div class="flex justify-center items-center h-screen"> <!-- Konten yang ingin ditengahkan secara vertical --> </div></pre><div>coba kamu kasi warna dulu aja div nya (bisa menggunakan bg_color) untuk melihat tinggi dari div nya,,, kalo tingginya masi acak, bisa di kasih fix tinggi div supaya bisa tetep centering<br><br><figure data-trix-attachment="{"contentType":"image/png","filename":"image_2023-04-06_083718720.png","filesize":6766,"height":202,"url":"https://i.ibb.co/Q87HRMK/image-2023-04-06-083718720.png","width":410}" data-trix-content-type="image/png" data-trix-attributes="{"presentation":"gallery"}" class="attachment attachment--preview attachment--png"><img src="https://i.ibb.co/Q87HRMK/image-2023-04-06-083718720.png" width="410" height="202"><figcaption class="attachment__caption"><span class="attachment__name">image_2023-04-06_083718720.png</span></figcaption></figure>misal hasilnya seperti ini, maka ya emang bakal centering ke atas kan,, tapi karena tinggi div nya berbeda,, maka jd salah..., coba atur aja, misal <strong>height: 50vh</strong><br><br>tambahan :<br>Jika konten yang ingin ditengahkan tidak memiliki height yang tetap, coba gunakan teknik flexbox. Tambahkan styling pada elemen parent dengan <strong>display: flex</strong> dan <strong>flex-direction: column</strong> dan pada elemen konten dengan <strong>align-self: center</strong>. Misalnya:</div><pre><div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh;"> <div style="align-self: center;"> <!-- Konten yang ingin ditengahkan secara vertical --> </div> </div></pre><div><br><br></div><div><br><br><br></div>
Tanggapan
udah dicoba, masih sama hasilnya
coba perlihatkan dulu kode yang kamu pakai sekarang seperti apa @yuxxeun
sudah dicoba cek diwarnainnya ga ? ? ku upload contohnya (kali aja kesalahannya seperti ini)
Jawaban Terpilih
<div><figure data-trix-attachment="{"contentType":"image/png","filename":"gambar.png","filesize":76719,"height":479,"url":"https://i.ibb.co/0KScYkC/gambar.png","width":1202}" data-trix-content-type="image/png" data-trix-attributes="{"presentation":"gallery"}" class="attachment attachment--preview attachment--png"><img src="https://i.ibb.co/0KScYkC/gambar.png" width="1202" height="479"><figcaption class="attachment__caption"><span class="attachment__name">gambar.png</span></figcaption></figure>sudah solved!<br><br>ternyata di icon hapus lupa dibungkus form, jadinya gamau sejajar walaupun udah dikasih flex</div>