CSS 在图像周围环绕文本

当前位置：主页 > 学无止境 > WEB前端 > CSS >

Vue React JavaScript Angular CSS HTML

CSS 在图像周围环绕文本

作者：迹忆客最近更新：2023/04/27 浏览次数：

CSS 允许您将文本环绕在图像周围，这是在 HTML 中创建视觉上吸引人且易于阅读的布局的好方法，最终提高了内容的可读性。您可以将其设置为环绕图像的左侧或右侧，也可以将其设置为环绕图像的顶部或底部。

CSS 在图像周围环绕文本

在 HTML 中，有多种方法可以将文本环绕在图像周围。最典型的方法是使用 align 属性。

我们可以利用 align 属性指定要插入图像的位置。例如可以使用 align 属性使图像在一段文本中居中。

使用 CSS，您可以完全控制相应地在图像周围环绕文本。文本将默认环绕图像以与图像的左边缘或右边缘齐平。

但是，您可以使用 CSS 浮动属性来控制文本环绕图像的方式。

{
    float: left;
}

如果将 float 属性设置为左侧，图像将浮动到文本的左侧，文本将环绕图像。如果将 float 属性设置为右侧，图像将浮动到文本的右侧，文本将环绕图像。

您还可以使用 CSS clear 属性来控制文本环绕图像的方式。

如果将 clear 属性设置为左侧，图像将浮动到文本的左侧，文本不会环绕图像。如果将 clear 属性设置为右侧，图像将浮动到文本的右侧，文本不会环绕图像。

{
    clear: left;
}

您还可以使用 CSS 溢出属性来控制文本环绕图像的方式。如果将 overflow 属性设置为 hidden，图像将浮动到文本的左侧或右侧，文本不会环绕图像。

{
    overflow: auto;
}

最后，您可以使用 CSS padding 属性来控制图像和文本之间的空间。

如果将 padding 属性的值设置为 0，图像将与文本齐平。如果将 padding 属性的值设置为 10px，则图像和文本之间将有 10px 的间距。

{
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
}

示例代码：

<!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>