css vertical center en horizontal center

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Desertme(sander)

desertme(sander)

05/10/2007 11:41:00
Quote Anchor link
Beste allen..,

Ik heb dit gezocht op google nou kreeg ik hier dit uit

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<html>
  <head>
    <title>css vertical center</title>
    
    <style type="text/css">
    <!--
    
    DIV.outer
      {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 300px;
      height: 300px;
      margin-left: -150px; /* half of width */
      margin-top: -150px;  /* half of height */
      background-color: #6699CC;
      }
      
      
    DIV.inner
      {
      position:absolute;
      left: 50%;
      top :50%;
      width: 100px;
      height: 100px;
      margin-left: -50px;  /* half of width */
      margin-top: -50px;   /* half of height */
      background-color: #99CCFF;
      }
      
    -->
    </style>
      
  </head>
  <body>
  
  
  
    <div class="outer">
      in center of page
    
      <div class="inner">

         in center of outer div
         <br /><br /><br />
         <a href="/">milov.nl</a>
      </div>
    
    </div>
  
  
  </body>
</html>


maar volgens mij kan dit velemale beter
weet iemand per toeval hoe ?
 
PHP hulp

PHP hulp

29/03/2024 10:45:01
 
Winkie

winkie

05/10/2007 11:43:00
Quote Anchor link
Waarom kan dit beter dan?
 
Jacco Engel

Jacco Engel

05/10/2007 11:43:00
Quote Anchor link
Class van je div inner afhalen en bij je div outer :
text-align : center ;
valign: center ;

Zetten?
 
Desertme(sander)

desertme(sander)

05/10/2007 11:45:00
Quote Anchor link
dit leek me eigenlijk zo on-logisch je hebt wel het juiste resultaat maar volgens mij is dit volgens de juiste normen zeg maar
 
Robert Deiman

Robert Deiman

05/10/2007 11:52:00
Quote Anchor link
Helaas werkt valign lang niet altijd Jacco. De enige bekende manier (misschien dat het met CSS3 wel gaat lukken) is zoals je hebt gedaan. Eerst zorgen dat de beginpositie vertikaal naar 50% gaat (dus in het midden van je scherm) en daarna de margin-top een negatieve marge geven van de helft van de hoogte van je div die je vertikaal wilt centreren.
Voor zover bij mij bekend is dat de enige valide en crossbrowser methode om een div zowel horizontaal als vertikaal te centreren.
 
Desertme(sander)

desertme(sander)

05/10/2007 12:08:00
Quote Anchor link
oo ok nou ja dan laat ik hem maar zo want ik dat het mischien ook met
maring-top:auto;
margin-bottom:auto;
margin-left:auto;
margin-right:auto;
kon maar dan doet ie alleen links en rechts
 
Robert Deiman

Robert Deiman

05/10/2007 12:18:00
Quote Anchor link
Dat klopt, ik heb ook ooit zo'n layout gemaakt (wederom voor een ander die het het bedacht, zie ook topic "Wat zitten jullie te doen") en daarmee heb ik het ook geprobeerd met margin:auto auto;
(dit betekend gewoon dat alle margin op auto worden ingesteld, het is in zo'n geval overdreven om alles apart in te voeren.)
 
Desertme(sander)

desertme(sander)

05/10/2007 12:41:00
Quote Anchor link
ja dat weet ik maar was ff voor voorbeeld maar dit werkte dus niet hehe
 
Kalle P

Kalle P

05/10/2007 12:52:00
Quote Anchor link
http://www.phphulp.nl/php/scripts/1/787/

Kijk daar eens en dan bedoel ik niet het script, maar met name het commentaar. Dan kom je vast wel tot de juiste code met wat je wilt.
 
Robert Deiman

Robert Deiman

05/10/2007 13:12:00
Quote Anchor link
@Kalle

Het mooie van CSS is dat het ook werkt als JavaScript is uitgeschakeld. Ik vind het niet zo mooi als je met JavaScript bezig gaat om iets te centreren, als dat ook zonder kan.
 
Kalle P

Kalle P

05/10/2007 13:31:00
Quote Anchor link
Lees mijn post eens goed. Hmm de eerste begreep je 'm ook waarschijnlijk niet goed, dus nogmaals. Ik bedoel niet het script, maar het commentaar dat ie moet lezen van de script. Daar staan bruikbare mogelijkheden met de voor- en nadelen.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.