[css] Centraliseren van image

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Tikkes C

Tikkes C

17/05/2011 10:46:14
Quote Anchor link
Dag iedereen

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)
PHP script in nieuw venster Selecteer het PHP script
1
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>



Mijn css:

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
#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;
}



(let niet op de borders, dat is maar om te zien hoe hij het juist zet. Deze gaan uiteraard weg)
 
PHP hulp

PHP hulp

28/03/2024 16:11:24
 
Ozzie PHP

Ozzie PHP

17/05/2011 10:54:55
Quote Anchor link
Weet niet of het werkt, maar probeer dit eens.

#photoBox {
text-align:center;
}
 
Dennis meijer

dennis meijer

17/05/2011 11:21:32
Quote Anchor link
Welke foto wil je in het midden hebben?
 
Tikkes C

Tikkes C

17/05/2011 19:01:04
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<div id="photoBox">
<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
 
Dennis meijer

dennis meijer

17/05/2011 19:04:12
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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%;
    
 
}


Dit zal waarschijnlijk werken maar er moet een betere manier zijn alleen weet ik die niet zo met een width die vershilt.
 
Bart Roelofs

Bart Roelofs

19/05/2011 07:35:38
Quote Anchor link
even voor je gezocht, dit staat op W3schools:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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="...">


hopelijk werkt dit?

Groeten Bart Roelofs
Gewijzigd op 19/05/2011 07:36:03 door Bart Roelofs
 
Johnno janssen

johnno janssen

19/05/2011 09:14:53
Quote Anchor link
probeer geen position: relative; te gebruiken
 
Tikkes C

Tikkes C

19/05/2011 10:26:21
Quote Anchor link
Ik heb alle voorstellen uitgeprobeerd maar helaas, geen verschil. Mijn foto blijft links in beeld staan.

Hoe kan dit nu?
 
Arjan -

Arjan -

19/05/2011 10:32:30
Quote Anchor link
Een margin: 0 auto; werkt in alle browsers wanneer de container een text-align: center; mee krijgt.

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 -
 
Tikkes C

Tikkes C

19/05/2011 10:48:06
Quote Anchor link
@Arjan: zo werkt t, heel erg bedankt!
 
Wouter J

Wouter J

19/05/2011 12:21:08
Quote Anchor link
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;
 



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.