html代码如何将文字居中显示图片

HTML代码如何将文字居中显示图片 在HTML中，如果你想要将文字和图片一起显示，并且文字要居中于图片上方，可以使用CSS样式，将文字包裹在一个块级元素中，并将该元素的宽度设置为图片的宽度，然后将该元素的text-align属性设置为center。 下面是一个简单的示例，包含了一个图片和要显示在图片上方的文字。段落标签使用p，CSS代码使用样式标签style，图片链接为相对路径的pic.jpg：

<style>
    .container {
        position: relative;  //设置父级元素相对定位
        display: inline-block;  //设置元素为块级元素
        width: 500px;  //设置元素宽度
        text-align: center; //设置子元素居中
    }
    .pic {
        width: 500px; //设置图片宽度
    }
    .text {
        position: absolute; //设置子元素绝对定位
        top: 0; //顶部对齐
        left: 0; //左侧对齐
        right: 0; //右侧对齐
        bottom: 0; //底部对齐
        text-align: center; //设置文本居中
        padding-top: 50px; //设置距离图片的距离
    }
</style>
<p class="container">
    <img src="pic.jpg" alt="图片" class="pic">
    <span class="text">这是居中显示在图片上方的文字</span>
</p>

在这个示例中，我们首先将外框的容器元素（p标签）的display属性设为inline-block，这使得该元素可以包含内部元素，但不会占据整行空间。然后，我们将该容器元素的宽度设置为图片宽度，使用text-align:center属性将容器内的文本居中显示。 随后我们将文字包裹在一个定位绝对的块级元素中，该块级元素的位置和大小与图片相同，并将text-align属性设置为center，使用padding-top属性设置一个距离图片的适当距离，以确保文字可以在图片的上方居中显示。 最后的结果应该是这样的： HTML代码可以让我们轻松地在网页中插入图像，并使文字以精美的方式显示在其上方。通过使用CSS样式，我们可以简单易行地居中显示文字和图像，提高网站的美观度和可读性。