[CSS] Centreren image in een DIV

[Verwijderd]

Voor het centreren van een image in een DIV gebruik ik de volgende code:

code:

#fotomidden img {
display:block;
margin-left:absolute;
margin-right:auto;
text-align: center;
}

waarna ik m zo aanroep:

code:

<div id="fotomidden">

  <a href="<?php echo htmlspecialchars(getFullImageURL());?>" title="<?php echo getBareImageTitle();?>">
  <?php printDefaultSizedImage(getImageTitle()); ?></a>

</div>

Dit werkt perfect in IE, maar niet in FF.

In FF blijft de image links staan en niet gecentreerd.

Wie heeft een oplossing?

[BtM909]

margin-left: absolute In IE werkt het door de text-align: center. Je zou die voor oudere IE versies nog erin kunnen laten, maar voor IE6 en hoger en FF gebruik je gewoon:

Cascading Stylesheet:

img{
  margin: 0 auto;
}

[ Voor 34% gewijzigd door BtM909 op 09-02-2009 23:05 ]

[Stijn]

"absolute" is geen waarde voor margin. Probeer eens "margin: 0 auto;"? Zou moeten werken zolang je in standards mode rendert.

[crisp]

enkel

Cascading Stylesheet:

#fotomidden {
    text-align:center;
}

zou voldoende moeten zijn; zowel A als IMG zijn standaard inline elementen en kan je dus dmv text-align centreren. Als je van de IMG expliciet een block-level element maakt wordt het een ander verhaal, maar dat lijkt me hier niet noodzakelijk.

[Verwijderd]

crisp schreef op dinsdag 10 februari 2009 @ 00:11:
enkel

Cascading Stylesheet:

#fotomidden {
    text-align:center;
}

zou voldoende moeten zijn; zowel A als IMG zijn standaard inline elementen en kan je dus dmv text-align centreren. Als je van de IMG expliciet een block-level element maakt wordt het een ander verhaal, maar dat lijkt me hier niet noodzakelijk.

nee hoor lukt niet...

check deze link maar eens in IE en FF

In FF staat die foto links, in IE in het midden...

[TeeDee]

Als ik het even zo 1 2 3 bekijk zit de afbeelding nog in een container div. Deze container div (.image) heeft een float left.

[NMe]

TeeDee schreef op dinsdag 10 februari 2009 @ 22:32:
Als ik het even zo 1 2 3 bekijk zit de afbeelding nog in een container div. Deze container div (.image) heeft een float left.

En bovendien kun je die container weer niet alignen met text-align.

[TeeDee]

NMe schreef op dinsdag 10 februari 2009 @ 22:35:
[...]
En bovendien kun je die container weer niet alignen met text-align.

Ongetwijfeld, maar als de container (.image) de breedte van de image aanhoud zal je niet zo gek veel kunnen centreren

Dus: of de container een fixed width geven (voor het gemak) of deze helemaal eruit slopen.

Tip: installeer eens de webdeveloper toolbar in Firefox. Er gaat een wereld voor je open (voornamelijk het "outline" item.

[DeluxZ]

TeeDee schreef op dinsdag 10 februari 2009 @ 22:38:
[...]

Ongetwijfeld, maar als de container (.image) de breedte van de image aanhoud zal je niet zo gek veel kunnen centreren

Dus: of de container een fixed width geven (voor het gemak) of deze helemaal eruit slopen.

Tip: installeer eens de webdeveloper toolbar in Firefox. Er gaat een wereld voor je open (voornamelijk het "outline" item.

Goeie tip! Meteen FireBug erbij en je hebt je foutjes snel opgespoord

[Verwijderd]

TeeDee schreef op dinsdag 10 februari 2009 @ 22:38:
[...]

Ongetwijfeld, maar als de container (.image) de breedte van de image aanhoud zal je niet zo gek veel kunnen centreren

Dus: of de container een fixed width geven (voor het gemak) of deze helemaal eruit slopen.

Tip: installeer eens de webdeveloper toolbar in Firefox. Er gaat een wereld voor je open (voornamelijk het "outline" item.

zelfs als ik die container aanpas of eruit sloop lijnt die image niet in het midden uit... de tekst wordt wel gecentreerd (wat overigens niet de bedoeling is) maar de image niet...die blijft in FF maar daar lekker links plakken...

ik snap er geen kont meer van

[TeeDee]

Maak eens een uitgeklede testcase want ik zie in de aangehaalde testcase hierboven toch nog redelijk wat float:lefts; e.d. staan.

[Verwijderd]

.

[ Voor 99% gewijzigd door Verwijderd op 02-04-2009 22:03 ]

[Leftblank]

Verwijderd schreef op woensdag 11 februari 2009 @ 21:42:
[...]


de volledige CSS:

Dat was dus zegmaar waar expliciet niet om gevraagd werd, probeer het probleem eens te reproduceren zonder alle extra meuk erbij, die maken het alleen onleesbaar en zijn verder of irrelevant, of niet te ontdekken als stoorzender op deze manier

[drm]

Ik vat even samen: de .image class heeft een float: left die zorgt dat de div.image zich niet uitvult over de beschikbare breedte. De image wordt dus wel gecentreerd in de div, maar aangezien de div de breedte van zijn content aanneemt (in plaats van uitgevuld wordt over de breedte) zie je dat niet.

Verder moet je gewoon met simpele testcases CSS en het gedrag van browsers leren gebruiken en niet in een enorme lap CSS net zo lang blijven hacken totdat je a) de oplossing hebt, of b) het hier moet vragen.