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

Question

I'm new to foundation and i am building a blog based off the Simple Blog template. The images are currently appearing like this however I would like them to appear in the middle. How would I do this?

This is the current code I have for my posts:

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

Thanks,

-Will

Answer 1

You can use the below code to align the image at the center with respect to the main class of id posts:

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

You could wrap the image in a div and use the text-center class ( docs ):

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