WordPress.org

Support

Support » Themes and Templates » [Resolved] Align Image In Center

[Resolved] Align Image In Center

  • 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

Viewing 2 replies - 1 through 2 (of 2 total)
  • esmi

    @esmi

    Forum Moderator

    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.

    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 🙂

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘[Resolved] Align Image In Center’ is closed to new replies.
Skip to toolbar