Question

我是基金会新手，我正在建立一个基于简单博客模板的博客。图像目前看起来像这样，但我希望它们出现在中间。我该怎么做？

这是我对帖子的当前代码：

<div id="posts" class="row medium-8 large-7 columns">
{% for i in object_list %}
<a href="{{i.get_absolute_url }}" style="color:dimgrey; text-decoration:none">
    <div class="blog-post">
        <h3 style="color: black;">{{ i.post_title }}<small> {{ i.post_date }}</small></h3>
        <hr> {% if i.post_image %}
        <img class="thumbnail" src="{{ i.post_image.url }}"> {% endif %}

        <p>{{ i.post_content|linebreaks }}</p>

        {% if instance.post_author.get_full_name %}
        <div class="callout">
            <ul class="menu simple">
                <li>Written By: {{ i.post_author.get_full_name }}</li>
            </ul>
        </div>
        {% endif %}
</a>
<br> 
{% endfor %}
</div>

谢谢，

- 将会

Answer 1

您可以使用以下代码将图像放在中心位置，相对于主要类别的ID帖子：

div.row medium-8 large-7 columns
{
    position: relative;
}
div.row medium-8 large-7 columns img
{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: [-50% of your image's width];
    margin-top: [-50% of your image's height];
}

Answer 2

您可以将图片换成div并使用text-center班级（docs）：

<div class="text-center">
    <img class="thumbnail" src="{{ i.post_image.url }}">
</div>

Zurb基金会 - 博客文章中的中心图像

2 个答案: