[CSS] Waarom centreet firefox niet en IE wel?

[Verwijderd]

Ik ben bezig een website te maken die met divs vertical moet centreren.

css:

code:

#container {
    width: 100%;
    text-align: center;
    height: 100%;
}

#inner {
    position: relative;
    top: 0;
    left: 0;
    width: 954px;
    height: 600px;
    border: 1px solid blue;
}

HTML:

code:

<div id='container'>
   <div id='inner'>
   </div>
</div>

In IE gaat het zoals ik wil nl:


Maar in FireFox blijft hij vrolijk links uitlijnen:


Ik snap daar eerlijk gezegd geen snars van, de container is 100% breed en ik zeg lijn uit in het midden. Dan moet hij toch ook in firefox in het midden komen te staan???

[Ramon]

volgens mij zeg je text-align in het midden; dat is iets anders

[user109731]

Het is niet voor niets text-align

Centreren van block-level elementen gaat met margin:0 auto; (linker en rechter marge op auto = centreren).

[Arethusa]

Je kunt iets proberen als dit:

Cascading Stylesheet:

#container {
    width: 100%;
    text-align: center;
    height: 100%;
    margin:0 auto;;
}

Edit: wat Grote prutser zegt

[ Voor 11% gewijzigd door Arethusa op 03-11-2006 15:04 ]

[Verwijderd]

Ik heb nu dit:

code:

#container {
    width: 100%;
    height: 100%; 
    margin: 0, auto; 
    text-align: center; }

#inner {
    text-align: left;
    position: relative;
    top: 0;
    left: 0;
    width: 954px;
    height: 600px;
    border: 1px solid blue;
}

Of doe ik nu iets pertinent verkeerd? Want het resultaat is nog steeds ongewijzigd

[Verwijderd]

Het werkt nu goed met enkel de volgende div:

code:

#container {
    margin-left: auto; 
    margin-right: auto;
    text-align: left;
    width: 954px;
    height: 600px;
    border: 1px solid blue;
}

Ik heb dus maar 1 Div nodig om het hele zaakje te centreren Bedankt iig. Ik dacht altijd dat text-align voldoende was om block elementen te centreren..

[Verwijderd]

Maar wat als je binnen die div weer absoluut wil positioneren?? Zodra ik dat wil doen vliegt alles weer spontaan naar links??

vb:

css:

code:

#container {
    margin-left: auto; 
    margin-right: auto;

    text-align: left;
    width: 954px;
    height: 600px;

    border: 1px solid blue;
}

#header {
    position: absolute;
    width: 954px;
    height: 26px;
    background-color: #121111;
    left: 0px;
}

html:

code:

<div id='container'>
   <div id='header'></div>
</div>

resulteert in:



Terwijl ik altijd dacht dat absoluut gepositinoneerde elementen zich absoluut positioneren vanaf hun parent en niet vanaf het document.. ???

[ Voor 70% gewijzigd door Verwijderd op 03-11-2006 15:29 ]

[T-MOB]

Ten opzichte van de eerste parent (of great parent ) die absoluut of relatief is gepositioneerd that is. Wil je absoluut positioneren tov #container dan zul je deze dus position: relative; mee moeten geven

[Verwijderd]

T-MOB schreef op vrijdag 03 november 2006 @ 15:41:
Ten opzichte van de eerste parent (of great parent ) die absoluut of relatief is gepositioneerd that is. Wil je absoluut positioneren tov #container dan zul je deze dus position: relative; mee moeten geven

Bedankt, bedankt, bedankt, bedankt, bedankt, bedankt, bedankt, bedankt, bedankt, bedankt, bedankt, bedankt, bedankt, bedankt, bedankt, bedankt, bedankt, bedankt, bedankt

Dat was de oplossing nu kan ik eindelijk verder.. deze website moet vandaag nog af..