Question

我希望我的图像下方也有文字，所以我尝试了以下但是没有用。我想要下面的文字直接和图片的中心

<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/

Answer 1

给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;
}

到li

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

和

span {

        display: block;
        text-align: center;
    }

Answer 2

.our_partners ul li a {
    margin: auto;
}

.our_partners ul li a img {
    padding: 10px 0;
    max-width: 100%;
    max-height: 100%;
}
.our_partners ul li a {
    width:230px;
    text-align:center;
}

将它放在custom.css中 - 使其居中。

Answer 3

将文字放在<a></a>标记内，如下所示：

<li>
    <a href="#"><img src="...s2-3.png" alt="">
        <span style="display:block;">High Speed Wifi</span>
    </a>
</li>

编辑为确保所有图片都对齐，您可以将最后一张图片设置为：

<li>
    <a href="#"><img src="...cons-2.png" alt="">
        <span style="display:block;">&nbsp;</span>
    </a>
</li>

此外，您显然可以在css文件中的<span>元素上设置样式，以减少重复。

Answer 4

我建议在list元素上使用margin-right: 15px属性，而不是anchor元素，因为它更有意义。您在列表元素之间分离，而不是锚点。

考虑到这一变化，您现在需要做的就是将span元素设置为占用可用宽度的100％，并居中对齐其内容。

.our_partners li {
    margin-right: 15px;
}
.our_partners a li span {
    text-align: center;
    display: inline-block;
    width: 100%;
}

并从anchor元素中移除您当前的边距集：

.our_partners ul li a {
    margin-right: 15px;    // <- remove this line
}

Answer 5

简单方法，使用<br/>：

<ul>
  <li>
    <a href="#"><img src="..." alt=""></a><br/>
    <span>High Speed Wifi</span>
  </li>
  (...)

更好的方法，威胁其中一个部分作为一个块，默认情况下，a img和span标记是内联的：

<ul>
  <li>
    <a href="#" style="display:block;"><img src="..." alt=""></a>
    <span>High Speed Wifi</span>
  </li>
  (...)

在类中外化css样式。您甚至可以将链接的图像包装到块跨度中：

# foo.css:
span.span-block { display: block; }
...
# 42.html
<span class="span-block"><a ...><img .../></a></span>
...

在引导程序下面对齐图像的文本中心

5 个答案: