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  */
}

更新 - 抱歉，忘了添加一些底部保证金。请参阅更新，但您可能已经解决了这个问题：）

响应式网站中的中心组合图像

1 个答案: