[css] Centraliseren van image

Door Tikkes C op 17-05-2011 10:46

3.409 views

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:


<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:


#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)

Ozzie PHP

17-05-2011 10:54

Weet niet of het werkt, maar probeer dit eens.

#photoBox {
text-align:center;
}

dennis meijer

17-05-2011 11:21

Welke foto wil je in het midden hebben?

T Tikkes C

17-05-2011 19:01 gewijzigd op 17-05-2011 19:01


<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

dennis meijer

17-05-2011 19:04

#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.

B Bart Roelofs

19-05-2011 07:35 gewijzigd op 19-05-2011 07:36

even voor je gezocht, dit staat op W3schools:



IMG.displayed {

    display: block;

    margin-left: auto;

    margin-right: auto }

...

<IMG class="displayed" src="..." alt="...">

hopelijk werkt dit?

Groeten Bart Roelofs

johnno janssen

19-05-2011 09:14

probeer geen position: relative; te gebruiken

T Tikkes C

19-05-2011 10:26

Ik heb alle voorstellen uitgeprobeerd maar helaas, geen verschil. Mijn foto blijft links in beeld staan.

Hoe kan dit nu?

A Arjan -

19-05-2011 10:32 gewijzigd op 19-05-2011 10:38

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...

T Tikkes C

19-05-2011 10:48

@Arjan: zo werkt t, heel erg bedankt!

Wouter J

19-05-2011 12:21

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;

Reageren

Inloggen om te reageren