css使字体始终在图片的中间

在网页设计中，经常有这样一个需求：使网页中的文字始终处于图片的中间，无论图片的大小、宽度和高度如何变化，文字都能够保持在中间水平居中的位置。这种效果可以使用 CSS 来实现。

下面是一段使用 CSS 的代码实现文字始终居中的例子：

 div class="container">
        img src="example.jpg">
        p>
    This is some text/p>
      /div>
     

上面的代码中，我们使用了一个容器元素（div> ）来包含图片和文字。然后，我们使用 CSS 来对容器元素和其中的元素进行样式定义。

 .container {
        position: relative;
        text-align: center;
        width: 100%;
  }
    img {
        display: block;
        margin: 0 auto;
        max-width: 100%;
  }
    p {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
  }
     

上面的 CSS 代码中，我们定义了容器元素的宽度为 100%，并使其相对定位（position: relative; ），然后设置图片的最大宽度为 100%，并使其居中显示（display: block; margin: 0 auto; ）。

接下来，我们对文字元素进行样式定义。我们将其使用绝对定位（position: absolute; ）放置在容器元素的中间位置，顶部和左侧均为 50%，并使用 CSS 的 transform 属性来使其水平和垂直都居中（transform: translate(-50%, -50%); ）。

有了以上的 CSS 样式定义，无论图片的大小、宽度和高度如何变化，文字都能够保持在中间水平居中的位置。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！