Black Friday = Pricewatch Bekijk onze selectie van de beste Black Friday-deals en voorkom een miskoop.

[CSS] Div centreren

Pagina: 1
Acties:

  • BlueCola
  • Registratie: November 2006
  • Laatst online: 26-09 02:11
Hallo!

Ik heb een probleempje. Zie : Website.
De tekst die je ziet zit in een divje. Het divje is mooi in midden. De randen van de background zijn links, recht en beneden te zien. Maar ik wil boven ook een rand van de background zien. Ik wil dus dat het divje echt HELEMAAL in het midden van de pagina staat. Align: center; werkt bij CSS helaas niet. Margin-top: 0 auto; Ook niet. text-align: center; zorgt er wel voor dat de tekst in het midden staat, maar het divje niet. Hoe krijg ik dit voor elkaar?

Alvast bedankt,

Marijn

And that's how one and one makes three.


  • Calamor
  • Registratie: Oktober 2004
  • Laatst online: 10:28
Waarom gebruike je Margin-top?
Volgens mij is dat alleen maar voor de bovenkant(zo ver ik weet).
Als je gewoon margin neemt wat gebeurt er dan?

[ Voor 28% gewijzigd door Calamor op 13-08-2008 10:17 ]


  • BlueCola
  • Registratie: November 2006
  • Laatst online: 26-09 02:11
Nu bijgewerkt, maakt niks uit, wordt er niet anders van.

And that's how one and one makes three.


  • _Thanatos_
  • Registratie: Januari 2001
  • Laatst online: 05-09 14:39

_Thanatos_

Ja, en kaal

Bij mij staan de divs gewoon in het midden :? (Firefox 2)

日本!🎌


  • disjfa
  • Registratie: April 2001
  • Laatst online: 04-11 11:05

disjfa

be

Ik zou als ik jouw was een keer rustig zoeken en als je dan nog vragen hebt uitleggen wat je allemaal uitgeprobeert hebt :)

Dan kunnen we je beter helpen.

disjfa - disj·fa (meneer)
disjfa.nl


Verwijderd

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html {
  background: #000;
}

body {
  background: #fff;
  margin: 0 auto;
  width: 50em;
}
</style>
<body>
<p>Speel hier maar mee.</p>
</body>
</html>


Scheelt wat nutteloze troep :)

[ Voor 5% gewijzigd door Verwijderd op 13-08-2008 10:23 ]


  • Calamor
  • Registratie: Oktober 2004
  • Laatst online: 10:28
Weet niet welke browers je gebruik. Maar in IE6 en FF3 staat het nu in het midden.(bij IE6 was het al)

  • BlueCola
  • Registratie: November 2006
  • Laatst online: 26-09 02:11
Ik gebruik IE 7. Ik bedoel dat de div nu horizontaal staat gecentreert. Maar ik wil ook dat ie verticaal staan gecentreert.
Ik heb ook 'vertical-align: middle;' geprobeert maar dat werkt ook niet.

[ Voor 101% gewijzigd door BlueCola op 13-08-2008 10:39 ]

And that's how one and one makes three.


  • K-Jay
  • Registratie: Augustus 2001
  • Laatst online: 17-11 12:42

K-Jay

Klaas Jan

Even googelen levert deze tutorial op, waarin wordt uitgelegd hoe je een div horizontaal en verticaal centreert.

Beter remmen=sneller racen: loadcellmod


  • Bosmonster
  • Registratie: Juni 2001
  • Laatst online: 11-11 10:24

Bosmonster

*zucht*

_Thanatos_ schreef op woensdag 13 augustus 2008 @ 10:19:
Bij mij staan de divs gewoon in het midden :? (Firefox 2)
Ga eens upgraden :+

Verwijderd

K-Jay schreef op woensdag 13 augustus 2008 @ 10:43:
Even googelen levert deze tutorial op, waarin wordt uitgelegd hoe je een div horizontaal en verticaal centreert.
Let wel: werkt alleen als de hoogte van de div vast staat.

  • disjfa
  • Registratie: April 2001
  • Laatst online: 04-11 11:05

disjfa

be

Verwijderd schreef op woensdag 13 augustus 2008 @ 14:34:
[...]
Let wel: werkt alleen als de hoogte van de div vast staat.
Daarom moet je blij zijn dat een scherm van een gebruiker altijd een vaste hoogte van 100% heeft :+

disjfa - disj·fa (meneer)
disjfa.nl


  • Pindamann
  • Registratie: December 2007
  • Laatst online: 14-11 15:01

Pindamann

Human

En margin-top: auto; margin-bottom: auto; ?

Edit:

Ik bedoel dan als je de bovenste div margin-top:auto; geeft en de onderste div (footer) margin-bottom: auto;

[ Voor 58% gewijzigd door Pindamann op 17-08-2008 23:26 ]

9800X3D | 3070


  • Kiphaas7
  • Registratie: Februari 2005
  • Laatst online: 17-11 17:56
Pindamann schreef op zondag 17 augustus 2008 @ 22:21:
En margin-top: auto; margin-bottom: auto; ?

Edit:

Ik bedoel dan als je de bovenste div margin-top:auto; geeft en de onderste div (footer) margin-bottom: auto;
Bij mijn weten werkt dat niet; alleen horizontale centratie is mogelijk met automatische margins.

--------------------------------------------------------------------------------------------------------------------

Cascading Stylesheet:
1
2
3
margin:25% auto;
height:50%;
padding:0;


Zo zou je het kunnen oplossen als je het niet erg vind dat je niet weet of je content past(eventuele scrollbar?) en dat je niet weet hoe hoog je element is (50% van het browservenster). Ik defineer even expliciet de padding erbij omdat voor andere waardes dan 0 het verhaal niet meer klopt. Moet samen wel 100% zijn natuurlijk. ;) Je kan dus wel 5% padding hebben maar dan moet je de height met 10% (=2*5%) verminderen.

Deze is ook nog wel leuk om te lezen.

http://www.brunildo.org/test/vertmiddle.html

Anders kom je al vrij snel terecht bij negatieve margins en een aantal geneste div elementen, al dan niet met absolute positionering. Geeft je meer controle, maar is wel complexer en zorgt ervoor dat je sourcecode een aantal onsemantische elementen bevat.

[ Voor 51% gewijzigd door Kiphaas7 op 18-08-2008 00:02 ]


  • Urk
  • Registratie: Maart 2000
  • Laatst online: 17-11 00:43

Urk

Vergeet niet met het voorbeeld wat je nu online hebt staan dat je blokje van de pagina afvalt wanneer je viewport kleiner is dan je blokje! Zowel verticaal als horizontaal!
Pagina: 1