[xhtml] tekst of element in het midden uitlijnen.

[bgever]

De titel zegt het al, wil je een beetje aan de standaards houden stuit je op het uitermate probleem dat het verschrikkelijk moeilijk is om iets in het midden uit te lijnen. Nu wil ik dit wel doen, en het liefste met CSS, maar het is me tot dusver niet gelukt. Ja, ok... wel, maar dan op een minder nette manier, en het werkt alleen in IE. Twee tabellen...

Maar nu is mijn vraag of iemand een juiste oplossing heeft om een element in het midden van het scherm te zetten in xhtml. Het moet in IE en alle betere browsers werken. En natuurlijk een beetje correct zijn. Ook als je de pagina resized zou fijn zijn, aangezien je anders gewoon margin-top: 25% zou kunnen gebruiken (niet netjes, maar werkt tenminste in alle browsers, op het uitlijnen na)

[Willem]

code:

div#divnaam{
  position:absolute;
  width:640px;
  height:422px;
  margin-left:-320px;
  margin-top:-211px;
  left:50%;
  top:50%;
}

[ Voor 4% gewijzigd door Willem op 18-03-2003 19:58 ]

[bgever]

willem169 schreef op 18 March 2003 @ 19:58:

code:

div#divnaam{
  position:absolute;
  ...
  top:50%;
}

Nu heb ik een redelijk hoge resolutie (1400×1050) en dan komt hij linksboven in de hoek te staan. Dat komt doordat er gebruik is gemaakt van waardes in px. Nu is alleen het probleem, dat ik moeilijk de waardes van het vensterformaat daar in kan vullen, dus die manier werkt niet echt. Want waarom zou je in dat geval niet gebruik maken van margin-left: helft van venster in px; en margin-top: helft van venster in px. Dat werkt precies het zelfde.

[Willem]

de margin left en top waardes moeten de helft zijn van de opgegeven waardes van de breedte en hoogte

[bgever]

Hmz, is het dan écht niet mogelijk? Ik vind het wel een beetje vreemd namelijk, want zo zijn toch wel heel veel sites opgebouwd. Allemaal brakke html dus. Als er echt niets anders op zit, dan gebruik ik wel de manier om het met twee tabellen te doen, en dan in CSS een hight: 100% mee te geven. Het werkt nl niet in mozilla, maar wel onder IE en op een MAC, en ja dan heb je het grootste deel van de gebruikers wel te pakken.

Is het niet mogelijk om via JS of zo die waardes van de px in te vullen in het stukje code dat hierboven staat?

[Verwijderd]

Dat van Willem werk echt hoor
Gebruik het ook en werkt in IE/Mozilla en Opera 7.

code:

    position: absolute;
    top: 50%;
    left: 50%;
    width: 760px; 
    height: 400px;
    background-image : url(background.gif);
    border-width: 2px 2px 2px 2px; 
    border-style: solid; 
    border-color: silver; 
    margin-top: -200px;
    margin-left: -380px;

[ Voor 62% gewijzigd door Verwijderd op 19-03-2003 15:16 ]

[Willem]

Heb je wel gelezen wat ik heb geschreven?

[Verwijderd]

volges mij kan je die margins ook in procenten zetten

[Verwijderd]

http://www.w3schools.com/css/default.asp
hele goede tutorial, nijna alles wordt besproken, kijk vooral onder examples

[bgever]

willem169 schreef op 19 March 2003 @ 15:27:
Heb je wel gelezen wat ik heb geschreven?

Whoops, nadat ik het eens een achtergrond kleurtje heb gegeven zie ik wat er gebeurt. Sorry, had te vlug gekeken. Door de px waardes met procenten te veranderen kreeg ik precies wat ik wilde.

Problem solved

[Guillome]

Mis ik iets of mag text-align:center niet meer

[Verwijderd]

XLerator schreef op 19 March 2003 @ 23:17:
Mis ik iets of mag text-align:center niet meer

Volgens mij werkt dat alleen met inline elementen en niet met block elementen.

[Verwijderd]

XLerator schreef op 19 March 2003 @ 23:17:
Mis ik iets of mag text-align:center niet meer

text-align is voor tekst uitlijning, niet voor het plaatsen van elementen. Als je een DIVje van 300px breed in het midden wil uitlijnen heb je niet zoveel aan text-align...