how to centre picture

  pcadv 21:59 05 Dec 06
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 06

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

}

.left {
text-align: left;
}

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

  Eric10 21:19 08 Dec 06

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 06

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 06

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 06

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 06

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.

Surface Pro (2017) vs Surface Pro 4

20 groundbreaking 3D animation techniques

How to mine Bitcoin on Mac