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

文本如何做到垂直居中对齐_html/css_WEB-ITnose

WBOY
Lepaskan： 2016-06-24 11:31:22
asal
1552 orang telah melayarinya

文本如何做到垂直居中对齐:
建议:尽可能的手写代码，可以有效的提高学习效率和深度。
网页布局中经常用到让文本在一行中垂直居中对齐。默认情况下文本是居上对齐的。
实例:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.mytest {  width: 200px;  height: 40px;  line-height: 40px;  border: 1px solid blue;}</style></head><body><div class="mytest">大家好，我要居中对齐</div></body></html>
Salin selepas log masuk

以上代码可以将div中的文本垂直居中对齐，对齐的方法就是把div的height属性值和line-height的属性值设为相等即可达到文本垂直居中效果，上面代码中两个属性值都设置为40px。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=4762

更多内容可以参阅:http://www.softwhy.com/divcss/

Label berkaitan：
文本如何做到垂直居中对齐
sumber：php.cn
Artikel sebelumnya：兼容所有浏览器的圆角矩形效果代码实例_html/css_WEB-ITnose Artikel seterusnya：CSS实现的鼠标滑过改变链接文字实例代码_html/css_WEB-ITnose
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 membenamkan video latar belakang dalam HTML/CSS? Hai semua, baru-baru ini saya menghadapi masalah. Saya cuba untuk menetapkan latar belakan...
daripada 2023-11-06 13:59:13
0
1
240
Bagaimana untuk memusatkan teks secara menegak di sebelah suis? Saya ingin membuat teks di tengah kelas "toggle-label" secara menegak dengan &qu...
daripada 2023-09-15 11:58:54
0
1
206
Mengapa apabila menjajarkan elemen butang secara menegak dalam div, elemen tersebut mempunyai lebih banyak ruang menegak daripada yang ditakrifkan oleh jidar CSS? Saya mempunyai halaman kerja dalam kemajuan di tapak ini dan saya fikir bahagian paling su...
daripada 2023-09-14 18:49:41
0
2
252
Bagaimana untuk memusatkan baris terakhir item dalam grid menggunakan Tailwind CSS? Saya menghadapi masalah cuba menggunakan Tailwind (menggunakan React) untuk menyelaraskan ...
daripada 2023-08-28 20:06:09
0
1
195
Bagaimana untuk memberi kebenaran menulis PHP ke direktori? Saya cuba mencipta fail menggunakan PHP tetapi ia tidak berfungsi. Saya mengandaikan ini k...
daripada 2023-08-27 15:25:11
0
2
310
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！