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
https://www.technofinger.com
- The topic ‘Align Image In Center’ is closed to new replies.