Zurb基金會 - 博客文章中的中心圖像

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>