Heim > Artikel > Web-Frontend > So stellen Sie das Bild in CSS rechts ein
So stellen Sie das Bild in CSS rechts ein
- 醉折花枝作酒筹Original
- 2021-04-23 14:43:5418291Durchsuche
In CSS können Sie das Attribut text-align verwenden, um das Bild auf rechts zu setzen. Sie müssen nur „text-align:right;“ auf das Bildelement setzen. Das text-align-Attribut gibt die horizontale Ausrichtung des Elementtextes an. Wenn der Wert richtig ist, bedeutet dies, dass das Element rechts angeordnet ist.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
Erstellen Sie eine neue HTML-Datei mit dem Namen test.html, um zu erklären, wie Sie Bilder in Divs mithilfe von CSS rechtsbündig ausrichten. Erstellen Sie in der Datei test.html ein Modul mit dem div-Tag und setzen Sie das Klassenattribut des div-Tags auf mycss. Erstellen Sie innerhalb des Div ein Bild mit dem img-Tag.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div class="mycss">
<img src="images/2.jpg" alt="">
</div>
</body>
</html>Legen Sie im CSS-Tag den Stil der Div-Through-Klasse fest, definieren Sie die Breite auf 400 Pixel, die Höhe auf 300 Pixel und den Rand auf 1 Pixel. Setzen Sie dann das text-align-Attribut auf right, das verwendet wird, um den Inhalt im div rechts auszurichten und so eine richtige Ausrichtung des Bildes zu erreichen.
<style type="text/css">
.mycss{
width:400px;
height: 300px;
border: 1px solid #ccc;
text-align: right;
}
</style>Öffnen Sie die Datei test.html im Browser, um den Effekt zu sehen.
Empfohlenes Lernen: CSS-Video-Tutorial
Das obige ist der detaillierte Inhalt vonSo stellen Sie das Bild in CSS rechts ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!