Wie man Bilder innerhalb einer Zelle ausrichten

Wie man Bilder innerhalb einer Zelle ausrichten

HTML-Tabellen können Sie Daten auf eine Web-Seite in tabellarischer form. Zum Beispiel, Ihr Produkt-Seite kann enthalten eine Tabelle mit Produkt-Beschreibungen und Bilder. Jede Tabelle besteht aus Zellen, die sich in Zeilen und Spalten. Tabellen haben auch einige Eigenschaften, die Steuern, wie die Elemente Aussehen, die in jeder Zelle der Tabelle. Mit diesen Eigenschaften, richten Sie die Bilder horizontal und vertikal innerhalb einer Zelle.

HTML-Tabellen können Sie Daten auf eine Web-Seite in tabellarischer form. Zum Beispiel, Ihr Produkt-Seite kann enthalten eine Tabelle mit Produkt-Beschreibungen und Bilder. Jede Tabelle besteht aus Zellen, die sich in Zeilen und Spalten. Tabellen haben auch einige Eigenschaften, die Steuern, wie die Elemente Aussehen, die in jeder Zelle der Tabelle. Mit diesen Eigenschaften, richten Sie die Bilder horizontal und vertikal innerhalb einer Zelle.

• Öffnen Sie den Editor und fügen Sie den folgenden HTML-code in ein leeres Dokument ein:
  https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
  https://www.w3.org/1999/xhtml'>
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Dies erstellt eine Tabelle mit zwei Zeilen und zwei Spalten. Vier 'td' - tags definieren die vier Zellen in der Tabelle. Beachten Sie, dass jede Zelle hat ein 'img' - tag. Dieses tag fügt ein Bild mit dem Namen 'xyz.jpg' in jeder Zelle.
• Ändern 'xyz.jpg' zu den Namen ein Bild auf Ihrer Festplatte.
• Überprüfen Sie die 'style' - tag in der Nähe der Spitze des HTML-Codes. Es definiert eine CSS-Klasse namens 'cellAlign.' Diese Klasse bestimmt, wie sich jede Zelle in der Tabelle aussieht. Es hat eine Eigenschaft namens ' text-align steuert die horizontale Ausrichtung innerhalb einer Zelle. Es hat auch eine Eigenschaft namens ' vertical-align steuert die vertikale Ausrichtung. Die Eigenschaft text-align mit dem Wert 'center' und dem vertical-align-Eigenschaft hat den Wert 'Mitte.'
• Drücken Sie 'Strg' und 'S' um den Editor zu öffnen 'Speichern unter' - Fenster. Typ 'Cell_Alignment_Image_Test.html in der 'File Name' Textfeld und klicken Sie auf 'Speichern', um speichern Sie das Dokument als HTML-Datei.
• Starten Sie den Windows Explorer und suchen Sie das HTML-Datei. Doppelklicken Sie auf es. Ihr browser wird geöffnet und zeigt die vier Bilder in die Zellen der Tabelle. Die Bilder werden zentriert in den Zellen, da jede Zelle, die text-align und vertical-align Werte sind 'Mitte' und 'Mitte.'
• Zurück zur HTML-Dokument im Editor, und suchen Sie die 'style' - tag wieder. Ändern Sie das Wort 'Mitte' bis 'Links' in der Eigenschaft text-align. Ändern Sie das Wort 'Mitte' nach 'unten' in der vertical-align-Eigenschaft. Drücken Sie 'Strg' plus 'S' speichern Sie die Datei.
• Kehren Sie zu Ihrem browser und drücken Sie 'F5', um den Inhalt zu aktualisieren. Die Bild-Ausrichtung wird sich ändern in den Zellen. Bilder erscheinen in der linken unteren Ecke der Zellen aufgrund der änderungen, die Sie gemacht, um die 'cellAlign' - Klasse.

Tipps & Warnungen

• Durch die Veränderung der Werte für text-align und vertical-align können Sie die position der Bilder innerhalb der Zellen in eine Vielzahl von Möglichkeiten. Sie können center -, linken und rechten, die als Werte für die Eigenschaft text-align steuert die horizontale Ausrichtung. Verwenden Mitte, oben und unten sind die Werte für die vertical-align-Eigenschaft.