Im Zeitalter des Tabellenlayouts muss man sich nicht allzu viele Gedanken über die vertikale Zentrierung machen. In Zellen wird standardmäßig eine Textzeile vertikal zentriert, und drei Textzeilen werden ebenfalls vertikal zentriert. Führen Sie ein CSS-Webseitenlayout durch, damit das Formular geändert wird. Der Text wird standardmäßig oben im Container positioniert.
Wie unten gezeigt:
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <Kopf> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>chinaz.com</title> <style type="text/css"> #MrJin { Breite:500px; Höhe:200px; Rahmen: 1px fest #03c; text-align:center; } </style> </head> <Körper> <div id="MrJin"><a href="http://www.52CSS.com/">CSS-Webdesign</a></div> </body> </html> |
Wie kann man in diesem Fall den Text vertikal zentrieren? Unterteilt in drei Situationen:
1. Wenn es sich um eine einzelne Textzeile handelt, können Sie das Problem mithilfe des Zeilenabstands lösen.
Wir fügen die Definition des Zeilenabstands hinzu, um den Effekt zu erzielen, dass eine einzelne Textzeile vertikal zentriert wird.
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <Kopf> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>chinaz.com</title> <style type="text/css"> #MrJin { Breite:500px; Höhe:200px; Rahmen: 1px fest #03c; text-align:center; Zeilenhöhe:200px; } </style> </head> <Körper> <div id="MrJin"><a href="http://www.52CSS.com/">CSS-Webdesign </a></div> </body> </html> |
2. Wenn es sich um mehrzeiligen Text handelt, hat der übergeordnete Container keine feste Höhe.
Wir können Polsterung verwenden, um das Problem zu lösen.
Stellen Sie die Polsterung des Containers auf denselben festen Wert ein, und die Höhe des Containers nimmt mit zunehmendem Inhalt zu.
Verwenden Sie dies, um eine vertikale Zentrierung von mehrzeiligem Text zu erreichen.
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <Kopf> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.52CSS.com</title> <style type="text/css"> #MrJin { Breite:500px; Polsterung:50px 0; Rahmen: 1px fest #03c; text-align:center; } </style> </head> <Körper> <div id="MrJin"><p><a href="http://www.52CSS.com/">CSS-Webdesign </p><p>Wir setzen uns dafür ein, chinesische Websites voranzutreiben! </a></p></div> </body> </html> |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <Kopf> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>chinaz.com</title> <style type="text/css"> #MrJin { Breite:500px; Polsterung:50px 0; Rahmen: 1px fest #03c; text-align:center; } </style> </head> <Körper> <div id="MrJin"><a href="http://www.52CSS.com/"> <p>CSS-Webdesign</p> <p>Webmaster-Website für China</p> <p>Wir engagieren uns für den Betrieb chinesischer Websites! </p> </a></div> </body> </html> |