Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk menetapkan pemusatan mendatar dan menegak teks css

Bagaimana untuk menetapkan pemusatan mendatar dan menegak teks css

WBOY
WBOYasal
2021-11-17 16:44:5629607semak imbas

Cara menetapkan pemusatan mendatar dan menegak teks dalam css: 1. Tambahkan gaya "{align-items:center}" pada elemen teks untuk memusatkannya secara mendatar 2. Tambah "{justify-content :center" ke elemen teks }" gaya untuk memusatkannya secara menegak.

Bagaimana untuk menetapkan pemusatan mendatar dan menegak teks css

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Cara menetapkan pemusatan mendatar dan menegak teks dalam css

1 Cipta fail html baharu, bernama test.html, kepada terangkan cara menggunakan css Pusatkan teks secara mendatar dan menegak. Dalam div, gunakan teg span untuk membuat baris teks untuk ujian. Tetapkan atribut kelas div kepada mydiv.

Dalam teg css, tetapkan lebar div kepada 200px, ketinggian kepada 100px dan sempadan kepada 1px melalui kelas.

Bagaimana untuk menetapkan pemusatan mendatar dan menegak teks css

2 Dalam teg css, tetapkan atribut paparan kepada flex untuk melaksanakan reka letak fleksibel, dan kemudian tetapkan atribut align-item ke tengah (berpusat secara mendatar) , atribut justify-content ditetapkan ke tengah (berpusat secara menegak).

Bagaimana untuk menetapkan pemusatan mendatar dan menegak teks css

Buka fail test.html dalam penyemak imbas untuk melihat kesannya.

Bagaimana untuk menetapkan pemusatan mendatar dan menegak teks css

Ringkasan:

1 Dalam div, gunakan teg span untuk mencipta baris teks dan tetapkan atribut kelas div kepada mydiv. .

2. Dalam teg css, tetapkan lebar div kepada 200px, ketinggian kepada 100px dan sempadan kepada 1px melalui kelas.

3. Dalam teg css, tetapkan atribut paparan kepada flex untuk melaksanakan reka letak flex, kemudian tetapkan atribut align-item ke tengah (berpusat secara mendatar), dan atribut justify-content ke tengah (berpusat secara menegak) .

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Video Pengaturcaraan! !

Atas ialah kandungan terperinci Bagaimana untuk menetapkan pemusatan mendatar dan menegak teks css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn