html - 在 bootstrap 下方对齐图像的文本中心

我也希望文字直接位于图像下方，因此我尝试了以下操作，但没有用。我想要文字下方和图片的中心

<div class="our_partners">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12">
                    <ul>
                        <li><a href="#"><img src="<?php echo esc_url(wp_get_attachment_url( $image1, 'full' )); ?>" alt=""></a>
                           <span>High Speed Wifi</span> </li>
                        <li><a href="#"><img src="<?php echo esc_url(wp_get_attachment_url( $image2, 'full' )); ?>" alt=""></a>
                          <span>    Latest Av Technology</span>

                        </li>
                        <li><a href="#"><img src="<?php echo esc_url(wp_get_attachment_url( $image3, 'full' )); ?>" alt=""></a>
                          <span>            Online Booking</span>


                        </li>
                        <li><a href="#"><img src="<?php echo esc_url(wp_get_attachment_url( $image4, 'full' )); ?>" alt=""></a>
  <span>            Concierge Service</span>


                        </li>
                        <li><a href="#"><img src="<?php echo esc_url(wp_get_attachment_url( $image5, 'full' )); ?>" alt=""></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

你可以在这里看到结果



如果您向下滚动到服务，就可以在此处看到它

http://ubtanz.solitudesoftware.co.uk/

最佳答案

给img

.our_partners ul li a img {
    padding: 29px 0;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

删除右边距：15px；到右边距：0;

.our_partners ul li a {
    margin-right: 0;
}

给李

.our_partners ul li {
    display: inline-block;
    margin: 0px 5px;
}

和

span {

        display: block;
        text-align: center;
    }

关于html - 在 bootstrap 下方对齐图像的文本中心，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47204608/