Bagaimana Cara Memusatkan Teks (Horisontal dan Vertikal) Di dalam div

Bagaimana Cara Memusatkan Teks Horisontal Dan Vertikal Di Dalam Div



Saat mendesain halaman web, pengembang dapat menambahkan berbagai komponen, termasuk gambar, teks, tabel, dan lainnya. Selain itu, teks dapat diratakan tengah dalam div menggunakan beberapa properti CSS. Metode paling populer untuk memusatkan teks secara horizontal adalah dengan menggunakan “ perataan teks ” atribut. Selain itu, Anda juga dapat menggunakan “ tinggi garis ' Dan ' vertical-align ” atribut untuk menyelaraskan teks secara vertikal.

Posting ini akan menyatakan metode untuk memusatkan teks secara vertikal maupun horizontal di dalam div.:







Bagaimana Memusatkan Teks Secara Horizontal Di Dalam Div?

Untuk memusatkan teks secara horizontal di dalam div, periksa prosedur yang diberikan.



Langkah 1: Buat Wadah div



Awalnya, buat wadah div dengan bantuan “

” elemen. Kemudian, masukkan “ pengenal ” di dalam tag pembuka div. Setelah itu, sematkan beberapa teks di antara tag div:





< div pengenal = 'sejajarkan konten' >
Linuxhint adalah salah satu situs web terbaik untuk pembuatan konten.
div >


Keluaran


Langkah 2: Akses div Container ke Center Align Text



Sekarang, akses wadah div dengan bantuan “ pengenal ” nama atribut dengan pemilih “ # ” dan terapkan properti CSS berikut:

#sejajarkan-konten{
lebar: 80 % ;
batas: 0 mobil;
padding: 20px;
latar belakang: #c8edf3;
perataan teks: tengah;
warna: rgb ( 49 , limabelas , 240 ) ;
}


Di Sini:

    • lebar ” properti digunakan untuk mengatur ukuran lebar wadah.
    • batas ” menentukan ruang kosong di luar wadah.
    • lapisan ” mendefinisikan ruang di dalam batas elemen.
    • latar belakang ” mengatur warna latar belakang di sisi belakang elemen.
    • perataan teks ” properti digunakan untuk mengatur perataan teks sebagai “ tengah ”.
    • warna ” menentukan warna untuk teks di dalam batas.

Dapat diamati bahwa kami telah berhasil memusatkan teks rata secara horizontal di dalam div yang dibuat:

Bagaimana Memusatkan Teks Secara Vertikal Di Dalam Div?

Untuk memusatkan teks secara vertikal di dalam wadah div, ikuti petunjuk yang diberikan.

Langkah 1: Akses Kontainer div

Pertama-tama, akses wadah div yang dibuat.

Langkah 2: Terapkan properti CSS ke Teks Tengah Secara Vertikal

Kemudian, terapkan properti CSS yang tercantum di bawah ini untuk memusatkan teks secara vertikal di div:

#sejajarkan-konten{
tampilan: tabel-sel;
lebar: 300px;
tinggi: 150px;
padding: 10px;
warna biru;
warna latar belakang: rgb ( 248 , 215 , 166 ) ;
perbatasan: 3px putus-putus #f09d03;
perataan vertikal: tengah;
}


Menurut potongan kode di atas:

    • Mengatur ' menampilkan ” yang menentukan perilaku tampilan elemen sebagai “ tabel-sel ”, yang artinya berfungsi seperti sel tabel di elemen div.
    • lebar ” properti menentukan ukuran lebar elemen.
    • tinggi ” mengatur ketinggian elemen.
    • lapisan ” mendefinisikan ruang kosong di dalam elemen.
    • warna ” digunakan untuk mengatur warna teks di dalam elemen.
    • warna latar belakang ” menentukan warna bagian belakang elemen.
    • berbatasan ” properti mendefinisikan batas pada suatu elemen.
    • vertical-align ” properti digunakan untuk mengatur perataan vertikal dari elemen yang ditentukan dalam “ tengah ”.

Keluaran


Anda telah mempelajari tentang prosedur lengkap untuk memusatkan teks di dalam wadah dengan dua cara, vertikal dan horizontal.

Kesimpulan

Untuk memusatkan teks secara vertikal dan horizontal di dalam div, pertama, buat wadah div dengan bantuan elemen

dan akses dengan menggunakan pemilih. Kemudian, terapkan properti CSS di mana ' perataan teks ” properti digunakan untuk penyelarasan horizontal, dan “ vertical-align ” menyetel perataan vertikal. Posting ini menunjukkan metode untuk memusatkan teks secara vertikal dan horizontal di dalam div.