简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > html tutorial > teks badan

垂直水平居中

WBOY
Lepaskan： 2016-10-09 08:31:49
asal
791 orang telah melayarinya

这是body代码

1.垂直水平居中

 

解析：父元素relative 子元素absolute，子元素设置宽高，top和left设置为50%，margin-top和margin-left设置为高宽的一半乘以-1.

2.水平居中：

方法1：margin: 0 auto;

 

方法2：

解析：父元素relative，子元素absolute，子元素设置宽度，left：50%；margin-left：宽度的一半乘以-1；

3.垂直居中：

 

解析：父元素relative，子元素absolute，子元素设置高度，top：50%；margin-top：宽度的一半乘以-1；

Label berkaitan：
垂直水平居中
sumber：php.cn
Artikel sebelumnya：雪碧图应用 Artikel seterusnya：XHTML基础
Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Isu terkini
Bagaimana untuk membuat elemen terapung disusun secara menegak dan bukannya secara mendatar dalam CSS? Saya cuba membuat halaman web dengan dua lajur, dengan kandungan utama di satu pihak dan k...
daripada 2024-04-06 20:45:26
0
2
386
Adakah terdapat cara untuk memaksa teks dalam flexbox dipusatkan secara menegak, tidak kira apa kod CSS lain yang kita ada? Saya mempunyai kod CSS berikut yang merupakan sebahagian daripada kod CSS yang lebih besar...
daripada 2024-04-06 20:41:51
0
1
518
Tajuk semula: Paparan Produk Menegak Pada halaman web saya, pada masa ini, produk projek disenaraikan secara menegak, baris dem...
daripada 2024-04-05 09:17:50
0
1
3505
Tajuk jadual diputar secara menegak, dijajarkan di tengah + bawah, penyemak imbas silang Saya mempunyai jadual dengan pengepala berputar yang kelihatan seperti yang diharapkan dal...
daripada 2024-04-04 16:45:25
0
1
330
Tajuk yang ditulis semula: Pusatkan elemen segi empat sama atau bulatan HTML tetap secara mendatar dan menegak apabila diubah saiz Bagaimana untuk memusatkan elemen html tetap segi empat sama atau bulatan dengan saiz yang...
daripada 2024-04-04 12:31:51
0
1
322
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！