how to centre picture

  pcadv 21:59 05 Dec 2006
Locked

hi,

I am trying to centre a picture using css. am using

.navigation
{
margin-left: 15%;
margin-right: 15%;
height:auto
}

however, the picture appears after 15% on the left but does not adjudt its right. I mean 15% is not left on the right side. can anyone suggest a solution to this?

thanks

  slightlymad 00:44 08 Dec 2006

.navigation
{
text-align: center;
margin: auto;
width: 70%;

}

.left {
text-align: left;
}

HTML:
<div class="navigation left"></div>

  Eric10 21:19 08 Dec 2006

You need to apply centering to the container for the image as:
'<div class="navigation"><img src="image.jpg"></div>'

Your style could be as simple as: .navigation { text-align: center; }

  pcadv 21:46 08 Dec 2006

Thanks for your response.

However, I did try the above style. However, as said before, the picture leaves space on the left side but it does not align itself to adjust the same way (i.e leave same space) on the right side.

Please help me.

thanks

  Eric10 22:16 08 Dec 2006

The code I've given you has been tested in IE6, IE7, Firefox and Opera and works in them all.

  pcadv 22:39 08 Dec 2006

Hi Eric10,

Thanks a lot for your response. Somehow the picture is convering the right side of the window. Is there anything to do with picture size and its resolution? If so, can you suggest the picture size that may be good on all window size?

thanks,
pcadv

  Eric10 10:58 09 Dec 2006

There are still many people using 800x600 resolution screens so you need to cater for them as far as possible. That means that your picture needs to be no more than 700 pixels wide if you are wanting to leave space at either side of it.
If you know that your target audience will be using higher resolution screens then you could go for a wider picture but it should still be less than the resolution aimed for (e.g. 900 pixels for a resolution of 1024x768).
On the matter of resolution there is no point in using anything much higher than 72 dots per inch (dpi) for displaying on a computer screen as you won't see any difference.

This thread is now locked and can not be replied to.

Elsewhere on IDG sites

WPA2 hack: How secure is your Wi-Fi?

HP’s new Surface Pro rival is designed specifically for Adobe-using designers and artists

Best kids apps for iPhone & iPad

Que faire si son iPhone ou iPad est tombé dans de l'eau ?