css如何实现img和文字绑定

CSS可以实现图片和文字的绑定，让页面更加丰富多彩。下面就来介绍一下如何实现。

div class="wrapper">
      img class="img" src="example.jpg" alt="example">
      p class="text">
    这是一段文字/p>
    /div>
.wrapper {
      position: relative;
}
.text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
}
    

首先，在HTML中将图片和文字放在一个div容器中，便于定位。在CSS中，需要设置容器的position为relative，让子元素可以相对于该容器定位。

然后，将文字元素的position设置为absolute，这样它就可以脱离文档流并相对于父容器定位。为了让文字居中，设置top和left的值为50%，并通过transform属性将其平移回来。当然，这里的50%可以根据实际情况调整。

需要注意的是，当图片尺寸不同时，文字位置可能需要微调。另外，在移动端需考虑不同屏幕宽度下的布局问题。

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