De PHPhulp kroeg
[css] Centraliseren van image
Ik zit met een vervelend probleempje.
Ik ben bezig aan een photoalbum en zou een image moeten centraliseren op de pagina.
Helaas blijft hij steeds links staan. Ik heb me al rot gezocht maar zonder resultaat.
Mijn HTML:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<div id="photoDiv">
<div id="photoNavigatorDiv">
<div class="photoNavigation"><a href=<?="?page=fotos&album=".$_GET['album']."&photo=0"?>>First</a></div>
<div class="photoNavigation"><a href=<?="?page=fotos&album=".$_GET['album']."&photo=".($_GET['photo']-1)?>>Previous</a></div>
<div class="photoNavigation"><a href=<?="?page=fotos&album=".$_GET['album']."&photo=".($_GET['photo']+1)?>>Next</a></div>
<div class="photoNavigation"><a href=<?="?page=fotos&album=".$_GET['album']."&photo=".(count($fotos)-1)?>>Last</a></div>
</div>
<div id="photoBox">
<img src=<?=$fotos[$_GET['photo']]->getImage();?> />
</div>
<div style="clear: both;"></div>
</div>
<div id="photoNavigatorDiv">
<div class="photoNavigation"><a href=<?="?page=fotos&album=".$_GET['album']."&photo=0"?>>First</a></div>
<div class="photoNavigation"><a href=<?="?page=fotos&album=".$_GET['album']."&photo=".($_GET['photo']-1)?>>Previous</a></div>
<div class="photoNavigation"><a href=<?="?page=fotos&album=".$_GET['album']."&photo=".($_GET['photo']+1)?>>Next</a></div>
<div class="photoNavigation"><a href=<?="?page=fotos&album=".$_GET['album']."&photo=".(count($fotos)-1)?>>Last</a></div>
</div>
<div id="photoBox">
<img src=<?=$fotos[$_GET['photo']]->getImage();?> />
</div>
<div style="clear: both;"></div>
</div>
Mijn css:
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
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
#photoDiv {
margin: 0 auto 0 auto;
position: relative;
width: 80%;
height: 100%;
border: 1px solid black;
}
#photoNavigatorDiv {
position: relative;
width: 100%;
height: 50px;
margin: 0 auto 0 auto;
}
.photoNavigation {
position: relative;
float: left;
font-size: 15pt;
font-weight: bold;
text-align: center;
width: 25%;
height: 50px;
}
.photoNavigation a {
display: block;
padding: 10px;
}
.photoNavigation a:hover {
}
#photoBox {
position: relative;
float: left;
border: 1px solid red;
min-width: 20%;
margin: 0 auto 0 auto;
}
#photoBox img {
margin: 0 auto 0 auto;
}
margin: 0 auto 0 auto;
position: relative;
width: 80%;
height: 100%;
border: 1px solid black;
}
#photoNavigatorDiv {
position: relative;
width: 100%;
height: 50px;
margin: 0 auto 0 auto;
}
.photoNavigation {
position: relative;
float: left;
font-size: 15pt;
font-weight: bold;
text-align: center;
width: 25%;
height: 50px;
}
.photoNavigation a {
display: block;
padding: 10px;
}
.photoNavigation a:hover {
}
#photoBox {
position: relative;
float: left;
border: 1px solid red;
min-width: 20%;
margin: 0 auto 0 auto;
}
#photoBox img {
margin: 0 auto 0 auto;
}
(let niet op de borders, dat is maar om te zien hoe hij het juist zet. Deze gaan uiteraard weg)
#photoBox {
text-align:center;
}
Code (php)
1
2
3
2
3
<div id="photoBox">
<img src=<?=$fotos[$_GET['photo']]->getImage();?> />
</div>
<img src=<?=$fotos[$_GET['photo']]->getImage();?> />
</div>
deze
@ozzy: dat is toch voor tekst en aangezien dit geen tekst is, lijkt t me sterk
Gewijzigd op 17/05/2011 19:01:20 door Tikkes C
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
#photoBox {
position: relative;
margin-left: auto;
margin-right: auto;
border: 1px solid red;
min-width: 20%;
}
position: relative;
margin-left: auto;
margin-right: auto;
border: 1px solid red;
min-width: 20%;
}
Dit zal waarschijnlijk werken maar er moet een betere manier zijn alleen weet ik die niet zo met een width die vershilt.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto }
...
<IMG class="displayed" src="..." alt="...">
display: block;
margin-left: auto;
margin-right: auto }
...
<IMG class="displayed" src="..." alt="...">
hopelijk werkt dit?
Groeten Bart Roelofs
Gewijzigd op 19/05/2011 07:36:03 door Bart Roelofs
Hoe kan dit nu?
Dus:
#photoBox {
width: 100%;
text-align: center;
}
#photoBox img {
display: block;
margin: 0 auto;
}
Echter moet de methode van Bart Roelofs ook werken (is zelfs een betere methode), maar dan zal je #photoBox een 100% width moeten geven!
Want als de container div (in dit geval #photoBox) de breedte aanneemt van de afbeelding dan kan ie uiteraard niet centreren...
Gewijzigd op 19/05/2011 10:38:30 door Arjan -
Arjan - op 19/05/2011 10:32:30:
Echter moet de methode van Bart Roelofs ook werken (is zelfs een betere methode)
De methode van Bart is precies hetzelfde als jou methode. Waarbij jij er nog text-algin: center; toevoegt zodat het in bijna elke browserversie werkt.
margin-left: auto;
margin-right: auto;
Is gelijk aan
margin: 0 auto 0 auto;
Wat je weer kunt schrijven als
margin: 0 auto;