0

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 ?

5
Contributors
4
Replies
14
Views
5 Years
Discussion Span
Last Post by aaaaabeecd
0

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)

Edited by drjohn: n/a

0

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.

0

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.