WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Align Image In Center (3 posts)

  1. kennethwatt
    Member
    Posted 5 years ago #

    Hi there,
    I have featured section where users can change between two categories on a theme which I'm developing. How can I align the image so that it is centered in the div?
    PHP
    <div id="featbg">
    <div id="featuredtitle">Technology | Entertainment</div>
    <div id="tab1" style="display:inline;">
    <?php $my_query = new WP_Query('category_name=Technology&showposts=1'); ?>
    <?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
    <img src="<?php $key="thumbnail"; echo get_post_meta($post->ID, $key, true); ?>" alt="<?php the_title(); ?>" class="featuredimage" />
    <?php endwhile; ?>
    </div>
    <div id="tab2" style="display:none;">
    <?php $my_query = new WP_Query('category_name=Entertainment&showposts=1'); ?>
    <?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
    <img src="<?php $key="thumbnail"; echo get_post_meta($post->ID, $key, true); ?>" alt="<?php the_title(); ?>" class="featuredimage" />
    <?php endwhile; ?>
    </div>
    </div>
    CSS
    .featuredimage {
    height: 250px;
    }

    #featbg {
    width: 525px;
    height: 250px;
    border: 1px solid #000000;
    float: left;
    margin-bottom: 16px;
    }

    #featuredtitle {
    width: 515px;
    height: 26px;
    font: 15px Georgia, "Helvetica Neue", Helvetica, "Trebuchet MS", Arial, Verdana, sans-serif;
    color: #ffffff;
    background-color: #000000;
    opacity: .65;
    filter: alpha(opacity=65);
    text-align: center;
    position: absolute;
    padding: 5px;
    }

    #featuredtitle a {color: #ffffff;}
    JavaScript
    function showTab1()
    {
    //Show the background overlay and topbox...
    document.getElementById('tab1').style.display='inline';
    document.getElementById('tab2').style.display='none';
    }
    function showTab2()
    {
    //Hide the overlay and tobox...
    document.getElementById('tab2').style.display='inline';
    document.getElementById('tab1').style.display='none';
    }

    Thanks in advance,
    Kenneth
    http://www.technofinger.com

  2. esmi
    Forum Moderator
    Posted 5 years ago #

    You need to set a width for your featured image in the CSS - in which case you should then be able to use margin:0 auto; to center it.

  3. kennethwatt
    Member
    Posted 5 years ago #

    If I don't set a width, then it will resize to the desired height in scale, for an example look at the thumbnails on the list of posts under the featured section.

    Thanks :)

Topic Closed

This topic has been closed to new replies.

About this Topic