Django模板中如何将图片标题置于图片下方而非右侧？

你当前的问题出在错误使用了表格元素（<tr>/<td>），表格单元格默认横向排列，导致标题显示在图片右侧；同时<ul>和<tr>混用属于无效HTML结构，也会打乱布局逻辑。要实现标题在图片下方、4个条目同行的效果，可按以下方式修改：

修正后的代码示例 #

情况1：url_list是包含4个键值对的字典（键为图片URL，值为标题） #

<div class="grid grid-cols-4 gap-2 p-2">
{% for url, caption in url_list.items %}
    <div class="flex flex-col items-center">
        <img width="350" height="300" src="{{ url }}" alt="{{ caption }}">
        <p class="mt-2 text-center">{{ caption }}</p>
    </div>
{% endfor %}
</div>

情况2：url_list是由4个单键值对字典组成的列表 #

<div class="grid grid-cols-4 gap-2 p-2">
{% for one_metric in url_list %}
    {% for url, caption in one_metric.items %}
    <div class="flex flex-col items-center">
        <img width="350" height="300" src="{{ url }}" alt="{{ caption }}">
        <p class="mt-2 text-center">{{ caption }}</p>
    </div>
    {% endfor %}
{% endfor %}
</div>

关键调整说明 #

1. 替换表格布局：用<div>作为每个图片+标题的容器，通过flex flex-col（Tailwind CSS类）让容器内元素垂直排列，标题自然落在图片下方；items-center可让图片和标题居中对齐。
2. 调整网格列数：将grid-cols-2改为grid-cols-4，确保4个条目刚好占满一行。
3. 清理无效结构：移除原本的<ul>和<tr>标签，避免HTML结构错误影响渲染。

如果不用Tailwind CSS，也可以用原生CSS实现垂直布局：

<style>
.image-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.image-item p {
    margin-top: 8px;
    text-align: center;
}
</style>
<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 8px;">
{% for url, caption in url_list.items %}
    <div class="image-item">
        <img width="350" height="300" src="{{ url }}" alt="{{ caption }}">
        <p>{{ caption }}</p>
    </div>
{% endfor %}
</div>

内容的提问来源于stack exchange，提问作者Fisher Coder