css... centrering i flera lager.

Åter igen återkommer jag med grundskolefrågor. ;)

Jag håller på bygger en sida. XHTML och CSS är det som gäller.
Jag får inte kolla på detta med centrering.
I grunden ser koden ut så här:

<div id="wrapper">

<div id="picbg">
</div>

<div id="pic">
</div>

<div id="upperstripe">
</div>

<div id="lowerstripe">
</div>

</div>

Jag vill då att hela paketet ska centreras wrapper, det är ju inte så svårt. Men när jag sedan vill att pic ska förskjutas 30 pixlar top och left så slår jag ut centreringen, jag förstår varför men hur fixar jag detta?

Även upperstripe och lowerstripe ska centreras och flyttas som pic.

Framförallt för att få det att fungera i IE och i FF.
När ska IE ta till sig CSS fullt ut? argh! :)

För inte ska jag behöva en css för IE heller?

Detta är cssn just nu:

body {
	text-align: center;
	min-width: 700 px;
}

#wrapper {
	margin:0 auto;
	width:700px;
	text-align: left;
}

#pic {
	position: relative;
	margin:0 auto;
	top: -514px;
	left: 30px;
}

Och detta fungerar i IE, men inte i FF. Där förskjuts bilden 5-6 piclar uppåt.

Jag vet inte om jag förstått dig rätt men pröva

[red]
#wrapper {
	margin:0 auto;
	width:700px;
	text-align: left;
        position: relative;
}

#pic {
	position: absolute;
	top: -514px;
	left: 30px;
}
[/red]

mv icaaq

Stilen text-align används för att centrera (eller justera) inline-objekt, alltså vanlig text. IE har tyvärr en bugg så att den även centrerar block-objekt, alltså div-taggarna.