[分享]css中将文字放在在图片中央

在前端开发中，有时候需要将文字放在图片中央。这一效果可以通过CSS实现。以下是实现此效果的方法。首先，在HTML中添加一个div容器和一张图片。代码如下： 这里是需要居中的文字 接着，在CSS中定...

在前端开发中，有时候需要将文字放在图片中央。这一效果可以通过CSS实现。以下是实现此效果的方法。
首先，在HTML中添加一个div容器和一张图片。代码如下：

<div class="container">
  <img src="example.png" alt="Example Image">
  <p>这里是需要居中的文字</p>
</div> 

接着，在CSS中定义.container的样式。这里我们使用flex布局，把图片和文字都水平和垂直居中。

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

这样就可以实现文字居中的效果了。完整的代码如下：

<div class="container">
  <img src="example.png" alt="Example Image">
  <p>这里是需要居中的文字</p>
</div>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
</style> 

注意，图片可以替换成其他的元素，比如一个div或者一个背景图片，只需要把相应的HTML和CSS做相应修改即可。
以上是CSS中将文字放在图片中央的方法，希望对你有所帮助。