Heim > Artikel > Web-Frontend > Wie zentriere ich Text und Bilder im HTML-Code?
Wie zentriere ich Text und Bilder im HTML-Code?
- 黄舟Original
- 2017-05-26 15:40:1111675Durchsuche
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">
 </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!