css图片水平居中文字下方

在网页设计中，很多时候我们需要将文字与图片配合起来展示，而这时候就需要将图片水平居中，而文字又需要在图片的下方展示。本文将介绍如何实现这一效果。

/*html代码*/div class="container">
      img src="example.jpg" alt="example">
      p>
    这里是文字内容/p>
    /div>
/*css代码*/.container {
      position: relative;
      text-align: center;
}
.container img {
      display: inline-block;
      vertical-align: middle;
}
.container p {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translate(-50%, 50%);
}
    

首先，在html中我们需要使用div将图片和文字包裹起来，这样方便我们进行样式的控制。然后我们给div设置了相对定位，这是为了让p元素的绝对定位相对于这个容器定位。将父元素的text-align设置为center可以让子元素在水平上居中。

接着，我们对img元素进行了display:inline-block和vertical-align:middle的设置。这样图片就可以在父元素中水平居中并且与文字在垂直方向上对齐。注意，这里为了保证不会出现以图片为基准线，上方和下方间距不一致的问题，要将图片位置设置为inline-block，而不能使用默认的block。

最后，在p元素中，我们设置了position:absolute让元素脱离文档流，再使用bottom和left将文字定位在父元素底部的中心位置。然后使用transform:translate(-50%, 50%)将元素向上移动50%，向左移动50%，以达到文字位于图片下方且居中的效果。

这样，我们就可以实现文字在图片下方且水平居中的效果了。

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