[分享]css 文字在图片居中

CSS 是一种用于设计和布局网页的语言。它提供了很多功能来美化和优化网页的呈现效果，其中包括将文字在图片居中的功能。使用 CSS 样式，您可以在网页上创建一个包含文字和图像的特殊区域，然后将文字与图像...

CSS 是一种用于设计和布局网页的语言。它提供了很多功能来美化和优化网页的呈现效果，其中包括将文字在图片居中的功能。使用 CSS 样式，您可以在网页上创建一个包含文字和图像的特殊区域，然后将文字与图像居中对齐，使其看起来更加美观和专业。

.img-box{
position:relative;
text-align:center; /*将图片居中*/
}
.img-box img{
display:block;
margin:auto; /*将图片居中*/
}
.img-box p{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%); /*将文字居中*/
}

如上述代码所示，我们首先在 CSS 样式中创建了一个名为 "img-box" 的元素，它被设置为相对定位。接下来，我们将该元素中的图像设为可见块元素，然后使用上下和左右 margin 来实现图像居中对齐。最后，我们将该元素中的段落设置为绝对定位，将其放置在图像的中心位置，并使用 "transform" 属性来使其水平和垂直居中。

现在，我们可以在 HTML 中使用<div class="img-box"><img src="example.jpg" /><p>这里是标题</p></div>的代码来创建一个居中显示图像和文字的区域。这样做不仅可以在视觉上为您的网页添加一些趣味性和专业感，还可以帮助您更好地掌握 CSS 样式的技巧和特性。

江苏,常州