centering two images

[davy_yg]

Hi,

I would like to center two images. These two images must be next to each other and located in the center of the screen harizontally.

This is what I've tried.

header.php

<div id="banner">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/banner.png"  class="center"/>
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/bannerside.png" class="center"/>
</div>

style.css

img.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

The result is these two images are on top of each other and located in the center of the screen. How to achieves my objectives ?

[drjohn]

Make a div to hold the images.
give it a class or id as appropriate (class is better in this case, you may want to have more than one such div on some pages)
set text-align:center in the div's css.
stick your images in the div, side by side.
Sorted.

(setting a width and margin:auto for the div is optional, and not necessary unless you wish to add border and shadow effects to the div)

[Umesh17_89]

You may use nested divs and use float property of div.

<div id="banner">
<div id="leftSideBanner">
<img src="<?php echo get_stylesheet_directory_uri(); ?> /images/banner.png"/>
</div>

<div id="rightSideBanner">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/bannerside.png"/>
</div>
</div>

In CSS

#leftSideBanner{
float: left;
}

#rightSideBanner{
float: right;
}

#banner{
display: inline;
margin-left: auto;
margin-right: auto;
}

I hope it will work.

[simplypixie]

As drjohn says, just

text-align:center;

on your containing banner div that you already have in place and remove all css for the images as it won't then be required unless you want to add margins or padding around them.

[aaaaabeecd]

Please delete this! Accidentally added!!