Bagaimana Saya Boleh Memusatkan Teks (Mendatar dan Menegak) Di dalam div

Bagaimana Saya Boleh Memusatkan Teks Mendatar Dan Menegak Di Dalam Div



Semasa mereka bentuk halaman web, pembangun boleh menambah pelbagai komponen, termasuk imej, teks, jadual dan lain-lain. Tambahan pula, teks boleh dijajarkan ke tengah dalam div menggunakan berbilang sifat CSS. Kaedah yang paling popular untuk teks berpusat mendatar ialah menggunakan ' penjajaran teks ” atribut. Selain itu, anda juga boleh menggunakan ' ketinggian garisan ” dan “ penjajaran menegak ” atribut untuk menjajarkan teks secara menegak.

Siaran ini akan menyatakan kaedah untuk memusatkan teks secara menegak dan juga secara mendatar di dalam div.:





Bagaimana untuk memusatkan teks secara mendatar di dalam div?

Untuk memusatkan teks secara mendatar di dalam div, lihat prosedur yang diberikan.



Langkah 1: Buat Bekas div



Pada mulanya, buat bekas div dengan bantuan '

” unsur. Kemudian, masukkan “ ID ” atribut di dalam teg pembukaan div. Selepas itu, benamkan beberapa teks di antara teg div:



< div ID = 'selaraskan-kandungan' >
Linuxhint adalah salah satu laman web terbaik untuk penciptaan kandungan.
div >


Pengeluaran


Langkah 2: Akses div Container ke Teks Jajar Tengah



Sekarang, akses bekas div dengan bantuan ' ID ' nama atribut dengan pemilih ' # ” dan gunakan sifat CSS berikut:

#align-content{
lebar: 80 % ;
margin: 0 auto;
padding: 20px;
latar belakang: #c8edf3;
text-align: tengah;
warna: rgb ( 49 , lima belas , 240 ) ;
}


di sini:

    • “ lebar ” harta digunakan untuk menetapkan saiz lebar bekas.
    • “ margin ” menentukan ruang kosong di luar bekas.
    • “ padding ” mentakrifkan ruang di dalam sempadan elemen.
    • “ latar belakang ” menetapkan warna latar belakang di bahagian belakang elemen.
    • “ penjajaran teks sifat ' digunakan untuk menetapkan penjajaran teks sebagai ' pusat ”.
    • “ warna ” menentukan warna untuk teks di dalam sempadan.

Dapat diperhatikan bahawa kami telah berjaya memusatkan teks sejajar secara mendatar di dalam div yang dibuat:

Bagaimana untuk memusatkan teks secara menegak di dalam div?

Untuk memusatkan teks secara menegak di dalam bekas div, ikut arahan yang diberikan.

Langkah 1: Akses Kontena div

Pertama sekali, akses bekas div yang dibuat.

Langkah 2: Gunakan sifat CSS pada Teks Tengah Secara Menegak

Kemudian, gunakan sifat CSS yang disenaraikan di bawah untuk memusatkan teks secara menegak dalam div:

#align-content{
paparan: sel meja;
lebar: 300px;
ketinggian: 150px;
padding: 10px;
warna: biru;
warna latar belakang: rgb ( 248 , 215 , 166 ) ;
sempadan: 3px putus-putus #f09d03;
vertical-align: tengah;
}


Mengikut coretan kod di atas:

    • Menetapkan ' paparan ' yang menentukan tingkah laku paparan elemen sebagai ' sel meja ”, yang bermaksud ia bertindak seperti sel jadual dalam elemen div.
    • “ lebar ” sifat menentukan saiz lebar elemen.
    • “ ketinggian ” menetapkan ketinggian unsur.
    • “ padding ” mentakrifkan ruang kosong di dalam elemen.
    • “ warna ” digunakan untuk menetapkan warna teks di dalam elemen.
    • “ warna latar belakang ” menentukan warna bahagian belakang elemen.
    • “ sempadan ” harta mentakrifkan sempadan pada unsur.
    • “ penjajaran menegak sifat ' digunakan untuk menetapkan penjajaran menegak elemen yang ditentukan dalam ' tengah ”.

Pengeluaran


Anda telah mempelajari tentang prosedur lengkap untuk memusatkan teks di dalam bekas dalam kedua-dua cara, secara menegak dan mendatar.

Kesimpulan

Untuk memusatkan teks secara menegak dan mendatar di dalam div, mula-mula buat bekas div dengan bantuan elemen

dan aksesnya dengan menggunakan pemilih. Kemudian, gunakan sifat CSS di mana ' penjajaran teks harta ' digunakan untuk penjajaran mendatar, dan ' penjajaran menegak ” menetapkan penjajaran menegak. Siaran ini menunjukkan kaedah untuk memusatkan teks secara menegak dan mendatar di dalam div.

Lain-lain

Kategori

Jawatan Popular

Menggunakan Isalpha() dan Isdigit() dalam C/C++: Cara Ia Berfungsi

Untuk Apa MATLAB Digunakan? Perkara-perkara penting dalam Pengaturcaraan MATLAB

Bagaimana untuk Membuat Sambungan WebSocket dalam Node.js?

Bagaimana Menulis Ujian Unit di Golang?

Cara Membuat Imej Responsif dengan HTML dan CSS

Adakah ChatGPT Menggantikan Semua Pekerjaan Pembangun Perisian?

Penyata Kes Oracle PL/SQL

Watak Khas (\t) dalam C++

Adakah ECS Sama dengan Docker?

Apakah Jenis Data Wujud dalam C#

Cara Menyelesaikan Sistem Persamaan Tak Linear dalam MATLAB

Kaedah JavaScript string.slice().

Apakah Perbezaan Antara Git Revert, Checkout dan Reset?

Cara Memainkan Fail Audio AMR pada Ubuntu 22.04

Cara Menggunakan Pernyataan Lelaran dalam C#

Cara Memadam Fail Pertukaran Vim

Cara Muat Semula Halaman Menggunakan JavaScript

Bagaimana untuk Memasang dan Mengkonfigurasi Astro.js pada Windows?

Cara Melindungi Akaun Pengguna Windows Anda

Apakah Antara Muka dalam C++