HOW TO CENTER A DIV HTML

แชร์
ฝัง
  • เผยแพร่เมื่อ 29 พ.ย. 2024
  • Berawal dari MEME how to center a div - cara membuat element html menjadi benar-benar ditengah yang menjadi keresahan programmer pemula seperti gue wkwkwk.
    SAWER TAKEWERKEWER: saweria.co/dea...
    Join this channel to get access to perks:
    / @deaafrizal
    #programming #tutorial #coding
    ☕ Discord ☕
    / discord
    🚀Tiktok @dea.afrizal / / dea.afrizal 🚀
    =================
    💌 Email (for business) 💌
    dea.afrizal@icloud.com
    ==================
    🔻🔻🔻 SUBSCRIBE 🔻🔻🔻
    For More Update
    🔺🔺🔺LONCENGNYA 🔺🔺🔺

ความคิดเห็น • 108

  • @jhoneat2711
    @jhoneat2711 2 ปีที่แล้ว +18

    Selalu asyik kalau liat bang Dea ngoding dengan ocehannya itu wkwk jadi gak bosen

    • @deaafrizal
      @deaafrizal  2 ปีที่แล้ว

      salam ocehan kenikmatan 😂

    • @davinraffilio7869
      @davinraffilio7869 2 ปีที่แล้ว +1

      setuju wkwkwk

    • @mdvisualid
      @mdvisualid 2 ปีที่แล้ว +2

      dengerin ocehan orang main game ❌
      dengerin ocehan orang sedang ngoding✅🤩

    • @deaafrizal
      @deaafrizal  2 ปีที่แล้ว

      @@mdvisualid wey cakra ceklis bermunculan

    • @deaafrizal
      @deaafrizal  2 ปีที่แล้ว

      @@davinraffilio7869 ngakak lu vin yaah! 👴👴

  • @rajahutan12134
    @rajahutan12134 2 ปีที่แล้ว +3

    .container kasih display flex
    .wrapper kasih margin auto
    auto ketengah

  • @Fawwaz-M-Umam
    @Fawwaz-M-Umam 2 ปีที่แล้ว +6

    99% orang nonton ini karna bosen
    1% orang nonton ini karna penting ( emang butuh tutor div ke tengah )
    wkwkwkwk

  • @aryandhialhaqampatompo1496
    @aryandhialhaqampatompo1496 2 ปีที่แล้ว +1

    Mantap kak! Singkat padat & jelas. Problem yang sering dihadapin temen2 di kampus saat belajar HTML ya ini nih... 😂

  • @mmrlmn5289
    @mmrlmn5289 2 ปีที่แล้ว +2

    display; *flex, justify content: center ama align item: center* ato ga pake *margin:auto* itu juga responsive ya namanya juga flexbox

  • @gahabalaseo
    @gahabalaseo 2 ปีที่แล้ว +2

    sedikit tambahan kalo text nya mau ke tengah tengah pembungkusnya(wrapper) kasih aja h1 nya line-height sesuai tinggi dari wrapper nya dan kasih text-align center.semoga bermanfaat cuy ya

    • @deaafrizal
      @deaafrizal  2 ปีที่แล้ว

      mantep tambahannya brodi 👏👏👏

    • @irfankurniawanS
      @irfankurniawanS 2 ปีที่แล้ว

      Ga bisa bang. Kalo textnya di blok itu bakal kedetek line heighnya tinggi banget jadi yg ke block. Mending di wrapper dikasi justify content lagi

  • @mulyadiudp6541
    @mulyadiudp6541 2 ปีที่แล้ว +1

    Thank you kang,,, yg bginian saya sring lupa pdahal ud prnah ngoding ny

  • @simpingsyndrome
    @simpingsyndrome 2 ปีที่แล้ว +6

    Simples way:
    display: grid;
    Height: 100vh; //100% of the browser height
    Place-items: center;
    //Vwalla your div is tercenterkan 👻

  • @arrykusumaputra
    @arrykusumaputra 2 ปีที่แล้ว +4

    Asli pusing banget cara nengahin elemen, gw kira cuma perlu satu class aja, eh ternyata perlu beberapa lembar class biar bisa di tengahin

  • @theclash3545
    @theclash3545 2 ปีที่แล้ว +4

    Tinggal nunggu waktu booming ni channel bisa tembus 1jt subs dalam waktu deket karna asik kalo ngomong👌🤣

    • @deaafrizal
      @deaafrizal  2 ปีที่แล้ว +2

      thank u bro ku amiiin pake bgt 👏

    • @theclash3545
      @theclash3545 2 ปีที่แล้ว

      @@deaafrizal siap bang rajin upload ama sisipin tips n trick biar orang semakin tertarik ama channel ini :D

  • @syqlmdhfiz_00
    @syqlmdhfiz_00 4 หลายเดือนก่อน +2

    bang buat konten penjelasan div,sama tag class itu apa

  • @aditiyanugroho3606
    @aditiyanugroho3606 2 ปีที่แล้ว +1

    Tips gw kalo mau bikin konten berada di tengah jadi tinggal bikin class yang nantinya gw pake berulang kali di html (biar efektif)
    Jadi gw bikin class .make-center
    Nah nanti style nya { display:flex; justify-content:center; align-items:center}
    Nah div class ini gw gunain sebagai pembungkus
    Saran gw kalo mau make div yang di atas usahain jangan ada dua div di bawahnya
    Karna tampilannya bakalan nyamping, jadi harus bikin pembungkus lagi terserah namanya nanti kalo udah tinggal di bungkus lagi pake div yang diatas
    :)

    • @aditiyanugroho3606
      @aditiyanugroho3606 2 ปีที่แล้ว

      Kalo mau bikin tampilan ada di kanan atau kiri tinggal ubah di justify-content nya
      Ada di start(kiri) atau di end(kanan)

    • @deaafrizal
      @deaafrizal  2 ปีที่แล้ว

      nice advice brooo thank u 👍😉

  • @lutfiikbalmajid3128
    @lutfiikbalmajid3128 2 ปีที่แล้ว

    Justify: horizontal
    Align: vertical

  • @raccoon.project
    @raccoon.project 2 ปีที่แล้ว +3

    Fun Fact:
    Terinspirasi dari konten "Bagaimana membuat new document" yang viewer-nya 500k 😂

  • @vivoichsan1208
    @vivoichsan1208 2 ปีที่แล้ว +1

    Apa beda nya dengan pemakain TRANSFORM, gan ? Terus kenapa bisa memutuskan pakai display flex ? Pada container

  • @trisastrawan3722
    @trisastrawan3722 2 ปีที่แล้ว +1

    sangat simple dan memecahkan masalah wkwkwk

  • @azwarhamid3518
    @azwarhamid3518 2 ปีที่แล้ว +2

    Yang di cari cari pemula

  • @alanshari__
    @alanshari__ 2 ปีที่แล้ว +2

    Kocak manfaat, klo ya subscribe, klo engga like.
    Gw join member deh iyaa

    • @deaafrizal
      @deaafrizal  2 ปีที่แล้ว

      wkwkwk thank u sudah faham endingnya 😉

  • @hudd1n366
    @hudd1n366 2 ปีที่แล้ว +2

    me who after centering div : ☝😎📸

  • @Crybabyssl
    @Crybabyssl 2 ปีที่แล้ว +2

    beliau ini, kocak ngoding

  • @luisly3187
    @luisly3187 2 ปีที่แล้ว +1

    Walaupun belom belajar sampai jago banget tapi tetap hadir #4

  • @febiyarosima4187
    @febiyarosima4187 ปีที่แล้ว +3

    Kak. Cara buat /* panel sosmed */ tulisannya miring itu Gmna sblm .sosmed ??

  • @BARRYOME
    @BARRYOME 2 ปีที่แล้ว +1

    nice👍👍👍

  • @faeldev1850
    @faeldev1850 2 ปีที่แล้ว +1

    Sumpah ocehannya itu loh ngakak sumpah gw sampe gk fokus 😂

  • @muelava
    @muelava 2 ปีที่แล้ว +1

    Pake ekstensi apaan tuh yang bikin nyala tag pembuka dan penutup?

  • @ridhoakbar3634
    @ridhoakbar3634 2 ปีที่แล้ว +1

    Bang coba buat authentikasi dong pake express

  • @codernuber3588
    @codernuber3588 2 ปีที่แล้ว +1

    wah ini gara gara live kemaren nih keknya bang 😂

  • @aburizaladinugroho4191
    @aburizaladinugroho4191 2 ปีที่แล้ว +3

    Klo ngga ketengah berarti kurang display: none.

    • @deaafrizal
      @deaafrizal  2 ปีที่แล้ว

      KWEKWWKK AUTO = ...

  • @amingangsar3814
    @amingangsar3814 2 ปีที่แล้ว +3

    bang bikin tutorial web pemesanan makanan /minuman

  • @dzakirozaan4601
    @dzakirozaan4601 2 ปีที่แล้ว +1

    bang bikin content react native dong hehe

  • @gamerskere7273
    @gamerskere7273 2 ปีที่แล้ว +1

    Mantap bang

  • @Mr.J-ati
    @Mr.J-ati 10 วันที่ผ่านมา

    Bang kalo bg putihnya mau dibiyaskan gimna caranya?

  • @mreksasanjaya8672
    @mreksasanjaya8672 2 ปีที่แล้ว +1

    flex to flexing

  • @christopherindrawan1316
    @christopherindrawan1316 2 ปีที่แล้ว +1

    sabii 😂

  • @EvanAkha
    @EvanAkha 2 ปีที่แล้ว +2

    akokaowkawoakoawk emang kampret abang satu ini. ak jga ikut bgung anjer kaoakawokawowak

  • @PNYELL
    @PNYELL 2 ปีที่แล้ว

    Ntaps

  • @zilongmiya3787
    @zilongmiya3787 2 ปีที่แล้ว +1

    Plis bang bahas html sampe akar akarnya, gua baru minat terjun ke dunia programing, dan jangan kecepetan ngetik nya wkwk

    • @irfankurniawanS
      @irfankurniawanS 2 ปีที่แล้ว

      Coba cek channel wpu bang. Lengkap tu untuk jadi front-end dan back-end (dasar)

  • @hamjayasaputrasalahuddin2158
    @hamjayasaputrasalahuddin2158 2 ปีที่แล้ว +2

    kocak wkwkwkwk

  • @NoriAlafa
    @NoriAlafa 2 ปีที่แล้ว +4

    Semua pada ngomongin meta verse , sedangkan gue lagi sibuk nge center div

  • @ItzMeHio
    @ItzMeHio 2 ปีที่แล้ว +2

    Avarage Flex Fan VS Avarage .container{
    position: relative;
    }
    .child{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
    } Enjoyer

    • @irfankurniawanS
      @irfankurniawanS 2 ปีที่แล้ว

      Anjir, tutorial ngetik lebih lama karna satisfying bunyi mechanical

  • @imamsudarajat3391
    @imamsudarajat3391 2 ปีที่แล้ว +1

    Sangat membantu kanggggggggggggggg

  • @Сямсудинудин
    @Сямсудинудин 2 ปีที่แล้ว +3

    Ngaku pasti kalian pernah lupa juga kan, walaupun udh pernah coba :v

    • @deaafrizal
      @deaafrizal  2 ปีที่แล้ว

      ngakuu hayooooooo

    • @mmrlmn5289
      @mmrlmn5289 2 ปีที่แล้ว

      Kalo gw bagian cara bikin navbar yg gua inget cuman display inline_block ato float left doang

    • @lutfiikbalmajid3128
      @lutfiikbalmajid3128 2 ปีที่แล้ว

      Yoi wkwk

  • @badakjawa1511
    @badakjawa1511 2 ปีที่แล้ว +2

    terinspirasi dari meme atau live kemaren ? :)

  • @andinata
    @andinata 2 ปีที่แล้ว +1

    Bang klo pake positition relative dan absolute bisakah?

    • @deaafrizal
      @deaafrizal  2 ปีที่แล้ว +1

      sabi banget dongs

  • @bang.er1c
    @bang.er1c 2 ปีที่แล้ว +1

    Ini Homepage


    gw coba codingan diatas ini, class homepage kita kasih style css height 100vh, trus class content height 100%, kenapa yg div class content melebihi height containernya bro? bukannya kalo kita kasih class content height 100%, itu harusnya terhadap containernya?

    • @deaafrizal
      @deaafrizal  2 ปีที่แล้ว +1

      iya harusnya kalau di kasih 100% bakal 100% dari parentnya (100vh).

    • @bang.er1c
      @bang.er1c 2 ปีที่แล้ว

      @@deaafrizal siapp.. thanks bro.
      soalnya gw coba ngoding kek yg di atas, hasilnya si child malah nambahin/keluar dari sizenya parent. tampilannya jadi lebih dari 100vh keliatannya. masih coba2 resolve ini.

    • @deaafrizal
      @deaafrizal  2 ปีที่แล้ว

      @@bang.er1c coba kalau di content kasih 100vh, terus di wrapper 100%

  • @Srhnrhllzh
    @Srhnrhllzh ปีที่แล้ว +1

    Eaeaea😂😂

  • @wahanasaputrasiregar4774
    @wahanasaputrasiregar4774 2 ปีที่แล้ว +1

    Tutorial python bg.kata dosen saya python lagi viral ya bg di dunia programing buat big data

  • @old_story506
    @old_story506 2 ปีที่แล้ว +1

    Thanks bang

  • @rahmatzaki1626
    @rahmatzaki1626 2 ปีที่แล้ว +1

    Akwkwoaoao kocak

  • @sriedynurcahyo3894
    @sriedynurcahyo3894 2 ปีที่แล้ว +1

    widget Center kalo di flutter

  • @ryu-xd
    @ryu-xd 2 ปีที่แล้ว +1

    Flex box css kan bg ?

  • @arielazlamnoer7874
    @arielazlamnoer7874 11 หลายเดือนก่อน

    Kak, cara membuat text di bagian kanan Border itu gimana ya? Tapi textnya tidak masuk di Border

    • @Jeje-hc5hl
      @Jeje-hc5hl 9 หลายเดือนก่อน +1

      Tulis aja right di dalem justify-content:center;

    • @arielazlamnoer7874
      @arielazlamnoer7874 9 หลายเดือนก่อน

      @@Jeje-hc5hl Oke, Terimakasih kak

  • @yakubfirmanmustofa112
    @yakubfirmanmustofa112 2 ปีที่แล้ว +1

    Bang bikin contact form email pakek nodejs

  • @_go1308
    @_go1308 2 ปีที่แล้ว +1

    eaeaea wkwk

  • @hexetra1172
    @hexetra1172 ปีที่แล้ว

    bang saya bikin div nya lebih dari satu pas di masukin display:flex; malah bentuknya ke pinggir
    nah gimana caranya supaya si divnya di tengah tapj berderetnyatuh ke bawah

    • @Falah_056
      @Falah_056 ปีที่แล้ว

      Kalau arah nya bisa make flex direction

  • @muh.nurhafidziissibela5911
    @muh.nurhafidziissibela5911 2 ปีที่แล้ว +1

    Bang bagi extension vscode nya bang..

  • @adeoctabrilyansyah9798
    @adeoctabrilyansyah9798 ปีที่แล้ว

    bang, cara nengahin tag div gimana bang??

  • @uno7257
    @uno7257 2 ปีที่แล้ว

    Keren bang wkwkwk

  • @msalehsolahudin2881
    @msalehsolahudin2881 2 ปีที่แล้ว +2

    Orang back-end full senyum melihat dan mengetahui hal ini kang 😁

    • @deaafrizal
      @deaafrizal  2 ปีที่แล้ว +1

      haahahha ngakakjir

  • @sayaukiv5417
    @sayaukiv5417 7 หลายเดือนก่อน

    Cara biar tulisannya di tengah background nya itu sendiri gimana?

    • @gojila3802
      @gojila3802 6 หลายเดือนก่อน

      coba bang
      h1 nya kasih atribut class juga. abis itu style di css pake flexbox yg bang dea sampaiin
      html:
      testing
      css:
      .h1-box {
      display: flex;
      justify-content: center;
      align-items: center;
      }
      kalo blm tau, monggo dicoba aja. tapi kalo udh tau ywdh bagus. saya cuma lagi ngetes ilmu saya doang soalnya wkwkwkw

    • @sayaukiv5417
      @sayaukiv5417 6 หลายเดือนก่อน

      @@gojila3802 0 ya mkasi bank

  • @imanuelantonioputra2704
    @imanuelantonioputra2704 2 ปีที่แล้ว

    Bang.. ajarin NextJS bang

  • @hardimansimamora7765
    @hardimansimamora7765 2 ปีที่แล้ว +1

    sedikit tapi sangat bermanafaat bang#aeaeae

  • @IrwanIb
    @IrwanIb 2 ปีที่แล้ว +1

    INI CHANNEL PICKY PICKS VERSI PROGRAMMER WKWKWKWK

  • @jefrychiedi
    @jefrychiedi 2 ปีที่แล้ว +2

    Asli pernakan lu lupa, ngakuuu

  • @alfath-v5v
    @alfath-v5v 2 ปีที่แล้ว +1

    buset windows xp

    • @deaafrizal
      @deaafrizal  2 ปีที่แล้ว

      sssssssstttttttttt

  • @8-1marisyaagnatasha42
    @8-1marisyaagnatasha42 7 หลายเดือนก่อน

    bangg makasii banyakk

  • @teuti6344
    @teuti6344 2 ปีที่แล้ว

    Hal paling menyebalkan hahah

  • @junksec251
    @junksec251 2 ปีที่แล้ว +2

    margin: auto; lebih simpel

  • @zrykun6751
    @zrykun6751 9 หลายเดือนก่อน

    wah video bahasa inggris gpp lah penting kode nya
    eh pas di buka lah kok bahasa indonesia
    lah suara bg dea lagi

  • @royyan1883
    @royyan1883 2 ปีที่แล้ว +1

    Pertama bang

  • @hilalhibrizi7688
    @hilalhibrizi7688 8 หลายเดือนก่อน

    Padahal ini hanya jokes

  • @lutfiikbalmajid3128
    @lutfiikbalmajid3128 2 ปีที่แล้ว

    Oh ini toh th-cam.com/video/2hSntjWsTOw/w-d-xo.html
    1:59:00 😂 gw juga sering lupa

  • @netralajeh5263
    @netralajeh5263 ปีที่แล้ว +2

    terlalu cepet, skip lah

  • @okichandra222
    @okichandra222 2 ปีที่แล้ว +1

    Lah tak kira margin

  • @AstroCode27
    @AstroCode27 2 ปีที่แล้ว +1

    kedua bang