html - 在响应式网站中居中组合图片

Question

如果您查看 kikidesign.net，这是我在移动设备上的作品集网站(我正在努力使我的作品集网站具有响应性)，您会注意到作品集图像没有居中。我尝试了很多方法使它以 width: 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  */
}

更新 - 抱歉，忘记添加一些底边距。请参阅更新，尽管您可能已经解决了这个问题 :)