在響應式網站中的中心投資組合圖片

Question

如果你看看kikidesign.net，我的投資組合移動網站（我正在努力使我的投資組合網站響應），你可以注意到投資組合圖片沒有居中。我嘗試了很多東西，使其以寬度爲中心：100％，但我無法使其工作。

請花些時間看看我的網站的源代碼，看看是否有什麼需要修正，以使其居中。

HTML：

<div id="thirds"> 
    <div class="portfoliotext"> 
      <h2><span>Portfolio</span></h2> 
    </div> 
<?php query_posts('cat=16&showposts=2'); ?> 
<?php if (have_posts()) : while (have_posts()) : the_post(); ?> 
    <div id="first" class="portfolio_item"> 
     <?php //get article_image (custom field) ?> 
     <?php $image = get_post_meta($post->ID, 'portfolio_image', true); ?> 

     <a href="<?php the_permalink(); ?>"><img class="centered" src="<?php echo $image; ?>" alt="Artwork" /></a> 
     <div class="details"> 
      <h2 class="detailstext"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 
     </div> 
    </div>  

<?php endwhile; ?> 

<?php endif; ?> 

<?php wp_reset_query(); ?> 

<?php endif; ?> 
    <div id="second" class="portfolio_item2"> 
     <img class="centered" src="<?php bloginfo('template_url');?>/images/MoreArtworks.png" /> 
     <div class="details"> 
      <a href="<?php echo get_option('home');?>/portfolio"><img src="<?php bloginfo('template_url');?>/images/RightArrow.png" /></a> 
     </div> 
    </div> 
</div> 

CSS：

#thirds { 
    margin-left: auto; 
    margin-right: auto; 
    width: 100%; 
    position: relative; 
    margin-top: 30px; 
    text-align: center; 
    float: left; 
} 
#first, #second, #third { 
    position: relative; 
    display: block; 
    text-align: center; 
    width: 300px; 
} 
.portfolio_item { 
    float: left; 
    background-color: #FFF; 
    width: 300px; 
    height: 200px; 
    text-align: center; 
} 
.portfolio_item2 { 
    float: left; 
    background-color: #FFF; 
    width: 300px; 
    height: 200px; 
    text-align: center; 
} 
.details { 
    width: 300px; 
    height: 200px; 
    background: black; 
    color: white; 
    text-align: center; 
    margin-left: 0 auto; 
    margin-right: 0 auto; 
} 
#first .details, #second .details { 
    position:absolute; 
    top:0; 
    left:0; 
    opacity: 0; 
    -webkit-transition: opacity; 
    -webkit-transition-timing-function: ease-out; 
    -webkit-transition-duration: 500ms; 
    -moz-transition: opacity; 
    -moz-transition-timing-function: ease-out; 
    -moz-transition-duration: 500ms; 
    -ms-transition: opacity; 
    -ms-transition-timing-function: ease-out; 
    -ms-transition-duration: 500ms; 
    -o-transition: opacity; 
    -o-transition-timing-function: ease-out; 
    -o-transition-duration: 500ms; 
    transition: opacity; 
    transition-timing-function: ease-out; 
    transition-duration: 500ms; 
} 

Answer 1

添加以下#first, #second, #third：

#first, #second, #third { 
    position: relative; 
    display: block; 
    text-align: center; 
    width: 300px; 
    float:none; /* add this */ 
    margin:0 auto 20px; /* add this */ 
} 

更新 -對不起，忘了添加一些底部邊緣。看到更新，雖然你可能已經這個了:)