Centering images

Hi!

I'm having a little problem with my site. I know how to center DIVs
using the "margin: auto" thing. But I'm unable to center two images.
I used the "text-align: center" hack with no results, too.

Here is my site:

http://project.fotografist.com/


and the CSS:

http://project.fotografist.com/styles/styles_black.css


Basically, I need to center the images in the "photos" DIV.


Can someone help me, please ?


thanks in advance

Abs wrote:

Hi!

I'm having a little problem with my site. I know how to
center DIVs
using the "margin: auto" thing. But I'm unable to center
two images. I used the "text-align: center" hack with no
results, too.

Here is my site:

http://project.fotografist.com/


and the CSS:

http://project.fotografist.com/styles/styles_black.css


Basically, I need to center the images in the "photos" DIV.


Can someone help me, please ?

I'm not sure what it is you want: center them one below the
other? or next to each other?

You are using float:left on the div which surrounds the first
img, this will never get it centered. Float:left means left,
not centered.
Also you don't need to put divs around the img's, you can
apply the styles to the img elements themselves.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Els wrote:

I'm not sure what it is you want: center them one below the
other? or next to each other?

yes, one next to the other.

You are using float:left on the div which surrounds the first
img, this will never get it centered. Float:left means left,
not centered.
Also you don't need to put divs around the img's, you can
apply the styles to the img elements themselves.

Ok, I'll try with no DIVs surrounding the images.

Abs wrote:

Els wrote:


I'm not sure what it is you want: center them one below the other? or
next to each other?


yes, one next to the other.

You are using float:left on the div which surrounds the first img,
this will never get it centered. Float:left means left, not centered.
Also you don't need to put divs around the img's, you can apply the
styles to the img elements themselves.


Ok, I'll try with no DIVs surrounding the images.

Great, it works now. But I don't know if the text-align hack is the
right way to do it. Anyways...

Abs wrote:

Abs wrote:

Els wrote:


I'm not sure what it is you want: center them one below
the other? or next to each other?


yes, one next to the other.

You are using float:left on the div which surrounds the
first img, this will never get it centered. Float:left
means left, not centered. Also you don't need to put divs
around the img's, you can apply the styles to the img
elements themselves.

Ok, I'll try with no DIVs surrounding the images.

Great, it works now. But I don't know if the text-align
hack is the right way to do it. Anyways...

You must notice though, that in IE, if the window is narrower
than the width of the two pictures, it won't be centered
anymore. In Gecko browsers, it will remain centered, thus
'losing' the left side of the left picture, where no scrollbar
will go. In IE, the left border of the left picture will stop
when touching the left side of the window, while the column
will remain centered.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -