css 图片上面字怎么居中

当我们在网页制作中需要在图片上添加文字时，为了美观和可阅读性，通常需要将文字居中放置。那么，在使用CSS样式设置时，应该如何实现呢？下面就让我们来学习一下。

首先，我们需要使用一个HTML标记，将图片和文字框在一起。如下代码：

  <div class="img-Box">
    <img src="picture.jpg" alt="图片">
    <div class="text-Box">这里是文字</div>
  </div>

其中，可以将图片和文字放在一个

标记里面，并设置一个class方便操作。其中，“img-Box”是图片容器的类名，“text-Box”是文字容器的类名。

接着，我们就可以使用CSS样式来实现文字居中。代码如下：

  .img-Box {
    position: relative;
    display: inline-block; /* 让图片容器像块元素一样显示 */
  }
  .text-Box {
    position: absolute; /* 设置文字容器绝对定位 */
    top: 50%; /* 垂直居中，距离顶部50%的位置 */
    left: 0; right: 0; /* 水平居中，左右两侧距离内容框为0 */
    text-align: center; /* 内容居中 */
    transform: translateY(-50%); /* 兼容性好的垂直居中方式 */
  }

通过上面的样式设置，我们实现了以下效果：

效果图

这里是文字

经过上述的设置，我们可以轻松实现图片上方字的垂直和水平居中，同时还兼容了各种浏览器。希望这篇文章能够帮助到大家。

上一篇：css 图片上面加图标下一篇：css怎么不继承父级元素

css 图片上面字怎么居中

相关文章