CSS-Umbruch von Text um ein Bild
CSS ermöglicht es Ihnen, Text um ein Bild zu fließen, was eine großartige Möglichkeit ist, visuell ansprechende und leicht lesbare Layouts in HTML zu erstellen und letztendlich die Lesbarkeit des Inhalts zu verbessern. Sie können es so einstellen, dass es um die linke oder rechte Seite des Bildes gewickelt wird, oder Sie können es so einstellen, dass es um die Ober- oder Unterseite des Bildes gewickelt wird.
CSS-Umbruch von Text um ein Bild
In HTML gibt es verschiedene Möglichkeiten, Text um Bilder zu fließen. Am typischsten ist die Verwendung des Attributs align.
Sie können das Attribut align verwenden, um die Bildposition anzugeben, an der Sie es einfügen möchten. Beispielsweise können Sie das Attribut align verwenden, um ein Bild innerhalb eines Textabsatzes zu zentrieren.
Mit CSS haben Sie die vollständige Kontrolle darüber, wie Sie Text entsprechend um ein Bild fließen lassen. Der Text umfließt standardmäßig ein Bild, sodass er bündig mit der linken oder rechten Kante des Bildes abschließt.
Sie können jedoch die CSS-Eigenschaft float verwenden, um zu steuern, wie Text ein Bild umfließt.
{
float: left;
}
Wenn Sie die Eigenschaft float auf left setzen, schwebt das Bild links neben dem Text und der Text umfließt das Bild. Wenn Sie die Eigenschaft float auf right setzen, schwebt das Bild rechts neben dem Text und der Text umfließt das Bild.
Sie können auch die CSS-Eigenschaft clear verwenden, um zu steuern, wie Text ein Bild umfließt.
Wenn Sie die Eigenschaft clear auf left setzen, schwebt das Bild links neben dem Text, und der Text umfließt das Bild nicht. Wenn Sie die Eigenschaft clear auf right setzen, schwebt das Bild rechts neben dem Text, und der Text umfließt das Bild nicht.
{
clear: left;
}
Sie können auch die CSS-Eigenschaft overflow verwenden, um zu steuern, wie Text ein Bild umfließt. Wenn Sie die Eigenschaft overflow auf hidden setzen, schwebt das Bild links oder rechts neben dem Text, und der Text umfließt das Bild nicht.
{
overflow: auto;
}
Schließlich können Sie die CSS-Eigenschaft padding verwenden, um den Abstand zwischen dem Bild und dem Text zu steuern.
Wenn Sie die Eigenschaft padding auf den Wert 0 setzen, schließt das Bild bündig mit dem Text ab. Wenn Sie die Padding-Eigenschaft auf einen Wert von 10px setzen, hat das Bild 10px Platz zwischen sich und dem Text.
{
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
Beispielcode:
<!DOCTYPE html>
<html>
<head>
<title>
Wrapping an Image with the text
</title>
<style>
body {
margin: 20px;
text-align: center;
}
h1 {
color: green;
}
img {
float: left;
margin: 10px;
padding-bottom: 2px;
width: 250px;
}
p {
text-align: justify;
font-size: 25px;
}
</style>
</head>
<body>
<h1>Wrap Text Around Image</h1>
<b>
The output of wrapping text around an image
</b>
<div class="square">
<div>
<img src="replaceYourImageHere.jpeg" alt="Longtail boat in Thailand" />
</div>
<p>
There are a few different ways to wrap text around images in HTML; the most typical way is to use the `align` attribute. You can utilize the align attribute to specify the image position where you want to insert it.
For instance, you can utilize the `align` attribute to center an image within a paragraph of text. With CSS, you are in full control to wrap text around an image accordingly. The text will default wrap around an image to flush
with the image's left or right edge. However, you can use the CSS `float` property to control how text wraps around an image.
</p>
</div>
</body>
</html>
Abschluss
Das Umbrechen von Text um ein Bild kann auch dazu beitragen, die Benutzerfreundlichkeit Ihrer Website oder Ihres Blogs zu verbessern. Wenn Sie viel Text auf einer Seite haben, kann das Lesen schwierig sein, wenn sich das Bild in der Mitte des Textes befindet, aber die Verwendung von Bildern zwischen Text verbessert die Lesbarkeit und Verständlichkeit.
Zeeshan is a detail oriented software engineer that helps companies and individuals make their lives and easier with software solutions.
LinkedIn