Centering images

[Abs]

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

[Els]

Re: Centering images

Abs wrote:
[color=blue]
> 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 ?[/color]

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 -

[Abs]

Re: Centering images

Els wrote:
[color=blue]
>
> I'm not sure what it is you want: center them one below the
> other? or next to each other?[/color]

yes, one next to the other.
[color=blue]
> 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.
>[/color]

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

[Abs]

Re: Centering images

Abs wrote:
[color=blue]
> Els wrote:
>[color=green]
>>
>> I'm not sure what it is you want: center them one below the other? or
>> next to each other?[/color]
>
>
> yes, one next to the other.
>[color=green]
>> 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.
>>[/color]
>
> Ok, I'll try with no DIVs surrounding the images.[/color]

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

[Els]

Re: Centering images

Abs wrote:
[color=blue]
> Abs wrote:
>[color=green]
>> Els wrote:
>>[color=darkred]
>>>
>>> I'm not sure what it is you want: center them one below
>>> the other? or next to each other?[/color]
>>
>>
>> yes, one next to the other.
>>[color=darkred]
>>> 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.[/color]
>>
>> Ok, I'll try with no DIVs surrounding the images.[/color]
>
> Great, it works now. But I don't know if the text-align
> hack is the right way to do it. Anyways...[/color]

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 -

[Brian]

Re: Centering images

Abs wrote:
[color=blue][color=green]
>> Ok, I'll try with no DIVs surrounding the images.[/color]
>
> I don't know if the text-align hack is the right way to do it.[/color]

IMG is inline by default, and text-align is for inline content, so it
is the right way to do it, and is not a "hack".

--
Brian (remove ".invalid" to email me)

http://www.tsmchughs.com/