css3 文字在图片居中对齐

CSS3的出现，为我们在网页设计中添加多种多样的效果提供了十分便捷的方式。其中，文本和图片的居中对齐就是一种常见的效果，今天我将给大家介绍如何使用CSS3实现文字在图片居中对齐的效果。

首先，我们需要在HTML代码中添加图片和文本，如下所示：

div class="container">
    img src="example.jpg">
    p>
    Example Text/p>
    /div>

接下来，我们需要将图片和文本都放在一个容器div中，并在CSS代码中对该容器进行样式设置。首先，我们将容器设置为相对定位，以便进行绝对定位。其次，我们将图片设置为绝对定位，并将其左边框设置为0，以确保图片在容器中居左。最后，我们可以通过设置文本的position属性为absolute来让文本绝对定位，并通过设置top和left属性，将文本置于图片下方居中对齐。完整代码如下：

.container {
    position: relative;
    display: inline-block;
}
img {
    position: absolute;
    left: 0;
}
p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
    

通过以上的CSS设置，我们已经成功实现了文本在图片中居中对齐的效果。这种效果可以使得我们在网页中更加灵活地进行排版，提高页面的美观程度。

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