Contoh CSS untuk memusatkan teks secara vertikal dalam satu atau beberapa baris

Penulis：Eve Cole Waktu Pembaruan：2009-05-31 01:04:45

Di era tata letak tabel, tidak perlu terlalu memikirkan pemusatan vertikal. Dalam sel, defaultnya adalah pemusatan vertikal. Satu baris teks dipusatkan secara vertikal, dan tiga baris teks juga akan dipusatkan secara vertikal. Melakukan layout halaman web CSS agar bentuknya berubah. Teks diposisikan di bagian atas wadah secara default.

Seperti yang ditunjukkan di bawah ini:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Ketat//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<kepala>
<meta http-equiv="Jenis Konten" content="teks/html; charset=utf-8" />
<title>chinaz.com</title>
<gaya tipe="teks/css">
#TuanJin {
lebar:500 piksel;
tinggi:200 piksel;
batas:1 piksel padat #03c;
perataan teks:tengah;
}
</gaya>
</kepala>
<tubuh>
<div id="MrJin"><a href="http://www.52CSS.com/">Desain Web CSS</a></div>
</tubuh>
</html>

Dalam hal ini, bagaimana cara memusatkan teks secara vertikal? Dibagi menjadi tiga situasi:

1. Jika teksnya satu baris, Anda dapat menggunakan spasi baris untuk menyelesaikan masalah.

Kami menambahkan definisi spasi baris ke dalamnya untuk mendapatkan efek memusatkan satu baris teks secara vertikal.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Ketat//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<kepala>
<meta http-equiv="Jenis Konten" content="teks/html; charset=utf-8" />
<title>chinaz.com</title>
<gaya tipe="teks/css">
#TuanJin {
lebar:500 piksel;
tinggi:200 piksel;
batas:1 piksel padat #03c;
perataan teks:tengah;
tinggi garis:200px;
}
</gaya>
</kepala>
<tubuh>
<div id="MrJin"><a href="http://www.52CSS.com/">Desain Web CSS </a></div>
</tubuh>
</html>

2. Jika teks multi-baris, wadah induk tidak memiliki ketinggian tetap.

Kita bisa menggunakan padding untuk menyelesaikan masalah tersebut.

Atur bantalan wadah ke nilai tetap yang sama, dan tinggi wadah bertambah seiring bertambahnya konten.

Gunakan ini untuk mencapai pemusatan vertikal teks multi-baris.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Ketat//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<kepala>
<meta http-equiv="Jenis Konten" content="teks/html; charset=utf-8" />
<judul>www.52CSS.com</title>
<gaya tipe="teks/css">
#TuanJin {
lebar:500 piksel;
bantalan:50px 0;
batas:1 piksel padat #03c;
perataan teks:tengah;
}
</gaya>
</kepala>
<tubuh>
<div id="MrJin"><p><a href="http://www.52CSS.com/">Desain Web CSS </p><p>Kami berkomitmen untuk mendukung situs web Tiongkok! </a></p></div>
</tubuh>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Ketat//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<kepala>
<meta http-equiv="Jenis Konten" content="teks/html; charset=utf-8" />
<title>chinaz.com</title>
<gaya tipe="teks/css">
#TuanJin {
lebar:500 piksel;
bantalan:50px 0;
batas:1 piksel padat #03c;
perataan teks:tengah;
}
</gaya>
</kepala>
<tubuh>
<div id="MrJin"><a href="http://www.52CSS.com/">
<p>Desain Web CSS</p>
<p>Situs Webmaster Tiongkok</p>
<p>Kami berkomitmen untuk mendukung situs web Tiongkok! </p>
</a></div>
</tubuh>
</html>