Postingan lainnya
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>