Cara membuat teks di tengah css

Hallo sobat kali ini saya akan berbagi ilmu tentang Contoh Kode Cara Membuat Teks Di Tengah Dengan HTML dan CSS

Sebelum membahas judul di atas, berikut sedikit kutipan atau motivasi untuk sobat semua

"Pendidikan adalah senjata paling mematikan di dunia, karena itu kamu bisa mengubah dunia"

...

Oke langsung saja kita bahas. Cara Membuat Teks Di Tengah Dengan HTML dan CSS

Ada banyak cara yang bisa digunakan untuk membuat teks atau objek berada di tengah menggunakan html dan css

Berikut beberapa cara yang bisa diikuti

Dengan HTML

Anda dapat menggunakan metode berikut langsung di tag di file. html dibuat

TEXT

Dengan Inline CSS

Anda dapat memasukkan CSS sebaris atau langsung di tag html sebagai berikut

TEKS

Dengan CSS Eksternal

Anda juga dapat memanggil file css seperti biasa dan sertakan skrip berikut di file css, skrip ini akan membuat tag p (paragraf) berada di tengah

p {penyelarasan teks. tengah}

semoga beruntung

Demikian artikel yang kami buat semoga bermanfaat bagi orang yang membacanya dan menambah wawasan bagi orang yang membaca artikel ini. Dan penulis mohon maaf apabila ada kesalahan dalam penulisan kata dan kalimat yang kurang jelas, mudah dipahami, dan lugas, mohon untuk tidak diambil hati

Dan kami juga sangat berharap bagi yang membaca artikel ini dapat meningkatkan motivasi dan mencapai tujuan yang diinginkan, karena artikel ini saya buat memiliki makna yang sangat dalam.

Kebanyakan Web Developer pasti masih bingung membuat elemen di tengah halaman web

Assalamualaikum, Pak. Wb. selamat datang kembali di channel saya guys. Kali ini saya akan membagikan beberapa trik untuk membuat elemen atau item berada di tengah. Ada enam cara untuk melakukannya hanya dengan menggunakan CSS. Dan inilah beberapa cara yang saya ketahui

1. Menggunakan Text-Align

Cara pertama ini mungkin sering diterapkan ketika ingin memediasi teks judul artikel atau halaman. Tapi siapa sangka kita juga bisa menggunakannya untuk memediasi sebuah elemen atau sekedar mengatakan <div>. Cara ini akan memperbaiki elemen secara horizontal. Berikut langkah-langkah implementasinya

• Buatlah dua <div>, yang pertama sebagai induknya dan yang kedua sebagai anaknya
• Bagian <div> pertama biasanya menggunakan kelas container dan bagian <div> kedua kita beri nama kelas box
• Di kelas container tambahkan text-align: center. Ini berguna untuk memediasi elemen/kelas turunannya box
• Tambahkan properti tinggi, lebar, dan warna ke kelas kotak sesuai keinginan
• Terakhir, buat posisi inline-block_ agar bisa disorot. Karena posisi defaultnya adalah <div>0, maka akan mengisi space dari kiri halaman atau dengan kata lain tidak dapat dipengaruhi oleh <div>1

2. Menggunakan Margin

Metode kedua ini sering digunakan untuk memoderasi konten halaman. Mirip dengan metode pertama, metode ini memediasi secara horizontal. Mari kita lihat bagaimana melakukannya sebagai berikut

• Buat tag <div> dengan kotak nama kelas
• Kemudian pada CSS-nya, atur tinggi, lebar, dan warnanya
• Terakhir tambahkan <div>_3. Ini akan membuat elemen kita dipusatkan secara horizontal. Nilai <div>_4 akan membuat margin atas dan bawah menjadi 0px. Anda bisa mengatur dengan nilai lain sesuai kebutuhan. Sedangkan nilai <div>_5 akan secara otomatis mengatur margin-kiri dan margin-kanan sehingga elemen berada di tengah

3. Menggunakan Posisi Mutlak

Dengan menggunakan absolute position kita dapat mengatur posisi elemen dimanapun kita mau tanpa terpengaruh oleh posisi elemen lainnya. Lalu bagaimana memediasi elemen dengan cara ini

• Pertama buat elemen box_seperti pada dua metode sebelumnya
• Kemudian tambahkan <div>_7 ke gaya CSS-nya
• Tambahkan<div>8
• Akhirnya tambahkan <div>_9 sama dengan setengah dari lebar box. Misal disini saya beri lebar box_100px, jadi atur <div>9 menjadi 50px

4. Menggunakan Transformasi dan Terjemahkan

Dari tadi kita sudah membuat elemen tengah secara horizontal, tapi bagaimana jika kita ingin membuat elemen yang benar-benar berada di tengah secara horizontal dan vertikal?. Jadi begini caranya

• Seperti biasa, buat dulu elemen kotaknya lalu atur ukuran dan warnanya
• Tambahkan posisi. sangat
• Tetapkan kiri dan atas menjadi 50%
• Terakhir tambahkan transformasi. terjemahkan(-50%, -50%). Zimsalabim, elemen kotak Anda akan berada di tengah halaman

5. Menggunakan Flexbox

Cara kelima ini juga akan membuat elemen berada di tengah baik secara horizontal maupun vertikal. Hampir sama dengan cara pertama, kita membutuhkan dua class div untuk membuatnya

• Buat kelas div containerdan box
• Atur ukuran dan warna boxseperti biasa
• Atur <div>6, <div>7dan containeruntuk <div>9
• Tambahkan container0 ke container. Ini akan membuat website kita responsif
• Terakhir, tambahkan container_2dan container3 ke container. Justify-content akan membuat elemen terpusat secara horizontal. dan align-items akan membuat elemen terpusat secara vertikal

6. Berpusat Secara Vertikal

Metode terakhir ini akan membuat elemen terpusat secara vertikal. Cara menambahkan gaya ke kelas box adalah container6 dan container7. Dan terakhir atur posisinya menjadi absolute

Oke sekian sharing pembelajaran kita kali ini, semoga bermanfaat, jangan lupa follow dan share jika kalian suka

Bagi kalian yang suka UI/UX bisa follow akun instagram saya di @jauhardev Terimakasih Assalamualaikum wr. Wb

Bagaimana cara membuat teks di CSS menjadi terpusat?

Tag apa yang membuat teks berada di tengah?

Apa itu teks?

Apa itu dekorasi teks?