html - 响应式网站中的中心投资组合图片

如果您在移动设备上浏览我的投资组合网站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;
}

最佳答案

将以下内容添加到#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  */
}

更新-抱歉，忘记添加一些底边距。查看更新，尽管您可能已经解决了这个问题：）

关于html - 响应式网站中的中心投资组合图片，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21173305/