[分享]css上面是图片下面是文字

在网页设计中，经常会遇到需要将一张图片和一段文字结合在一起的情况。这时，我们往往会采用一种比较常见的布局方式：将图片放在文字上方，文字紧贴在图片下方。 这里是图片下方的文字内容。 .contai...

在网页设计中，经常会遇到需要将一张图片和一段文字结合在一起的情况。这时，我们往往会采用一种比较常见的布局方式：将图片放在文字上方，文字紧贴在图片下方。

 <div class="container">
        <img src="picture.jpg" alt="picture">
        <p>这里是图片下方的文字内容。</p>
    </div>

    .container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    img {
        width: 100%;
        max-width: 500px;
    }

    p {
        margin-top: 20px;
        font-size: 18px;
        line-height: 1.5;
    } 

上面的代码展示了一种简单的实现方法。我们首先创建一个`div`容器，里面包含一张图片和一段文字。使用flex布局，设置主轴方向为垂直方向，图片和文字都居中对齐。接着，设置图片的宽度为100%，并添加一个最大宽度限制。最后，设置文字距离图片的距离以及字体大小和行高即可。

这种布局方式在实际应用中非常常见，如展示产品详情、介绍公司服务等场景。掌握了这种布局技巧，你可以轻松实现网页中图片和文字的组合展示。同时，灵活运用CSS的各种属性和技巧，可以让你的网页呈现出更加优美的效果。