Php 高级自定义字段Wordpress的显示库网格视图

我已经在ACF中创建了一个gallery字段组，如下图所示

为了在我的wordpress页面上显示这一点，我在php文件中添加了以下代码

<?php 

$images = get_field('employee_testimonial_gallery');

if( $images ): ?>
<ul>
    <?php foreach( $images as $image ): ?>
        <li>
                 <img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />

            <p><?php echo $image['caption']; ?></p>
        </li>
    <?php endforeach; ?>


</ul>

“alt=”“/>

但是，最终结果显示为列表

我需要图像显示为如下所示的网格

---

我已经阅读了有关ACF的所有文档，这似乎是一个一般性问题。TIA。

添加以下css以将其列为类似网格的内容。开始之前，只需向输出html标记中添加一个类

<ul class="gal-grid">
<?php foreach( $images as $image ): ?>
    <li>
             <img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />

        <p><?php echo $image['caption']; ?></p>
    </li>
<?php endforeach; ?>
</ul>

---

添加以下css将其列为类似网格的内容。开始之前，只需向输出html标记中添加一个类

<ul class="gal-grid">
<?php foreach( $images as $image ): ?>
    <li>
             <img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />

        <p><?php echo $image['caption']; ?></p>
    </li>
<?php endforeach; ?>
</ul>

---

Hi Niamul谢谢你的帮助，快到了，但是css代码放在哪里？我已经把它放在我的样式表中，它显示在一个网格中，但是它显示在左对齐的位置。我如何居中这个块？我可以得到你的网站链接，这样我可以在那里帮助你更多吗？Hi Niamul谢谢你的帮助，快到了，但是css代码放在哪里？我已经把我的css代码放在了我的位置在我的样式表中，它显示在一个网格中，但它显示在左对齐中。我如何将此块居中？我可以获取您的站点链接，以便在那里为您提供更多帮助吗？