Heim >Web-Frontend >HTML-Tutorial >Wie zentriere ich Text und Bilder im HTML-Code?
HTML-Code, wie zentriert man Text/Bild? Dies ist eine Frage, die Front-End Leier in den Fragen und Antworten zur Programmierung von W3Cschool gestellt hat. Netizen-Spender Tong Xifu gab eine ausführliche Antwort.
HTML-Textzentrierung und HTML-Bildzentrierung durch Implementierung der Textzentrierung und Bildzentrierung in HTML. Es gibt drei Methoden zur Implementierung der Text- und Bildinhaltszentrierung in HTML, von denen zwei mithilfe von CSS-Stilen implementiert werden Um dies zu erreichen, wird immer das Original verwendet. Fügen Sie dem HTML-Tag „align="center"“ (center) hinzu.
1. CSS-Zentrierungsstil zum Körper hinzufügen
Wir legen den CSS-Stil direkt auf den Körper fest: text-align:center
1. Vollständiger HTML-Beispielcode:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="gb2312" /> <title>W3Cschool居中实例</title> <style> body{text-align:center} </style> </head> <body> W3Cschool会被居中 </body> </html>
2. Zentrierte Beispiel-Screenshots
Stellen Sie den Körper auf die Mitte, um text- oder bildzentrierte Screenshots zu erhalten
2. Fügen Sie dem äußeren Textobjekt einen CSS-Zentrierungsstil hinzu
Zuerst benennen wir den CSS-Selektor „.w3cschool“ und fügen dem Selektor einen Zentrierungsstil hinzu. Unser Beispiel zeigt zwei DIV-Objekte, eines für Text und eines für Bilder.
1. Der entsprechende CSS-Code lautet wie folgt:
.w3cschool{text-align:center}
2 Der vollständige HTML+DIV+CSS-Code lautet wie folgt:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="gb2312" /> <title>W3Cschool居中实例</title> <style> .w3cschool{text-align:center} </style> </head> <body> <div class="w3cschool">W3Cschool会被居中</div> <div class="w3cschool"> ![](http://upload-images.jianshu.io/upload_images/2642238-eba477a8a75edf90.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) </div> </body> </html>
3. CSS implementiert Bilder in Objekten und Screenshots des Textzentrierungseffekts
HTML-Textzentrierung realisieren – Beispiel für HTML-Bildzentrierung
HTML-Textzentrierung realisieren – HTML-Bildzentrierung Beispiel-Screenshots
3. Fügen Sie align="center"
zum äußeren Textobjekt hinzu. Diese Methode war in der Vergangenheit eine gängige Methode Erzielen Sie eine Zentrierung des Bild- oder Textinhalts im Objekt. Unser Beispiel demonstriert die Zentrierung in HTML-Tabellen und die Zentrierung von Inhalten in allgemeinen HTML-Tags.
1. Vollständiger HTML-Quellcode:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="gb2312" /> <title>html align居中-W3Cschool</title> </head> <body> <div align="center">W3Cschool会居中的</div> <table width="100%"> <tr> <td align="center">表格中居中</td> </tr> </table> </body> </html>
2. Screenshot des Beispieleffekts
Screenshot des zentrierten HTML-Textes
Zentrieren Sie den HTML-Text und zentrieren Sie den Text in der HTML-Tabelle, um Screenshots zu erhalten.
Verwenden Sie das align-Attribut direkt im Tag, um die Praxis der Verwendung des Zentrierungscodes „align="center"“ zu erleichtern Gewöhnliche HTML-Tags und HTML-Tabellen-Tags, um den Inhalt innerhalb des Objekts zentriert zu realisieren.
Das obige ist der detaillierte Inhalt vonWie zentriere ich Text und Bilder im HTML-Code?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!