css vertical center en horizontal center
Ik heb dit gezocht op google nou kreeg ik hier dit uit
Code (php)
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
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>
<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 ?
text-align : center ;
valign: center ;
Zetten?
Voor zover bij mij bekend is dat de enige valide en crossbrowser methode om een div zowel horizontaal als vertikaal te centreren.
maring-top:auto;
margin-bottom:auto;
margin-left:auto;
margin-right:auto;
kon maar dan doet ie alleen links en rechts
(dit betekend gewoon dat alle margin op auto worden ingesteld, het is in zo'n geval overdreven om alles apart in te voeren.)
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.
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.