[html/css] img in div verticaal centreren

[Verwijderd]

Beste tweakers,

Ik kom er maar niet achter hoe ik het voor elkaar kan krijgen om een img verticaal te centreren in een div. Ik heb 't in de search niet kunnen vinden, dus ik hoop niet dubbel te posten.

Een van mijn pogingen tot dusverre:

html:

code:

<div class="div_avatar">
  [img]"plaatje.gif"[/img]
</div>

css:

code:

.div_avatar { 
    background-color: #FFFFFF;
    width: 65px;
    height: 65px;
    border-style: solid;
    border-color: #D1B407;
    border-width: 1px;
    text-align: center;
    vertical-align: middle;
}

Iemand die me een zetje in de goede richting kan geven?

[SIMPY.be]

code:

.div_avatar { 
    background-color: #FFFFFF;
    width: 65px;
    height: 65px;
    border-style: solid;
    border-color: #D1B407;
    border-width: 1px;
    left: 50%;
    top: 50%;
    margin-left: -32px;
    margin-top: -32px;
    position: absolute;
}

[ Voor 5% gewijzigd door SIMPY.be op 11-01-2006 16:44 . Reden: position: absolute; vergeten ]

[Verwijderd]

Dan zweeft hij ineens een eind weg.

Als jouw oplossing de juiste zou moeten zijn, zou het probleem misschien kunnen zijn dat ik de html aangeleverd heb gekregen met een table met td rowspans?

quick edit: hoewel, hij zweeft inderdaad ergens weg, maar daarnaast is de img nog steeds niet verticaal gecentreerd in mijn div.

[ Voor 26% gewijzigd door Verwijderd op 11-01-2006 16:42 ]

[SIMPY.be]

ohja, ik vergeet het altijd

in uw css toevoegen
position: absolute;

[Verwijderd]

in uw css toevoegen
position: absolute;

Dan zweeft hij ergens anders heen

[SIMPY.be]

mhh, dan ligt het aan uw tabellen...
http://users.simpy.be/got.html is wel goed
mag ik je erop wijzen dat tabellen niet bedoelt zijn voor layout!

[BitBit3r]

wat je kan doen is een doorzichtige pixel de totale hoogte van de div maken, die pixel de vertical-align: middle; style meegeven.

Tekst, en plaatjes hiernaast zullen dan in het midden staan. Niet heel erg netjes, maar het werkt wel...

Het zou zoveel chiller zijn als een div net zoals <td valign=middle> zou werken.... helaas

[Verwijderd]

je kan de image als background zetten. Dan kan je hem wel verticaal in het midden zetten.

[Verwijderd]

SIMPY.be schreef op woensdag 11 januari 2006 @ 16:49:
mhh, dan ligt het aan uw tabellen...
http://users.simpy.be/got.html is wel goed
mag ik je erop wijzen dat tabellen niet bedoelt zijn voor layout!

Het zal aan mij liggen, maar jouw voorbeeld aligned top left.

BitBit3r schreef op woensdag 11 januari 2006 @ 16:50:
wat je kan doen is een doorzichtige pixel de totale hoogte van de div maken, die pixel de vertical-align: middle; style meegeven.

Tekst, en plaatjes hiernaast zullen dan in het midden staan. Niet heel erg netjes, maar het werkt wel...
helaas[/small]

Inderdaad niet echt super. Moet toch beter kunnen.

Verwijderd schreef op woensdag 11 januari 2006 @ 16:52:
je kan de image als background zetten. Dan kan je hem wel verticaal in het midden zetten.

Heb ik ook al overwogen, zou ik kunnen doen inderdaad. Maar het liefst probeer ik het eerst zo voor elkaar te krijgen.

[Verwijderd]

Verwijderd schreef op woensdag 11 januari 2006 @ 16:57:
[...]
Heb ik ook al overwogen, zou ik kunnen doen inderdaad. Maar het liefst probeer ik het eerst zo voor elkaar te krijgen.

Dan zou ik het met line-height doen.
hoewel, dat werkt alleen met tekst...

[ Voor 8% gewijzigd door Verwijderd op 11-01-2006 17:36 ]

[Sappie]

Werkt uiteraard met alle inline elementen en het zou op zich dus moeten kunnen met line-height en / of font-size icm vertical-align.. weet alleen niet exact hoe ze in verhouding staan en of ze cross-browser goed overeenkomen. Ik ga dat eens proberen uit te zoeken.

In een fatsoenlijke browser (zoals FF) werkt volgens mij het gelijk zetten van de line-height aan de hoogte van de div icm "vertical-align: middle" toegepast op de img al.

edit: heb ff gezocht en aangekloot, maar ik krijg het in IE niet op een nette en eenduidige manier voor elkaar.

[ Voor 17% gewijzigd door Sappie op 11-01-2006 19:21 ]

[Verwijderd]

Vind het toch vreemd dat zoiets relatief simpels zo lastig moet zijn. Het is nu niet bepaald een abnormaal idee dacht ik.

[frickY]

SIMPY.be schreef op woensdag 11 januari 2006 @ 16:43:
ohja, ik vergeet het altijd

in uw css toevoegen
position: absolute;

En de parent een position: relative!!

Als je die niet toepast wordt het object vanuit de linkerbovenhoek van het scherm gepositioneerd. Met position: relative in de parent wordt hij vanuit de linkerbovenhoek van de parent geplaatst.

[TheRookie]

Verwijderd schreef op woensdag 11 januari 2006 @ 16:57:
[...]

Het zal aan mij liggen, maar jouw voorbeeld aligned top left.

In welke browser ?
In FF 1.5 staat ie horizontaal en verticaal in het midden

[Verwijderd]

frickY schreef op donderdag 12 januari 2006 @ 10:06:
[...]

En de parent een position: relative!!

Als je die niet toepast wordt het object vanuit de linkerbovenhoek van het scherm gepositioneerd. Met position: relative in de parent wordt hij vanuit de linkerbovenhoek van de parent geplaatst.

Eens even proberen..

TheRookie schreef op donderdag 12 januari 2006 @ 10:39:
[...]

In welke browser ?
In FF 1.5 staat ie horizontaal en verticaal in het midden

Euhm, echt niet.. Ik krijg het idee dat jullie allebei op de positie van de div letten. Maar het gaat om de positie van de image IN de div. En die staat echt topleft (zowel in FF als in IE).

[Verwijderd]

Heb nu dit, hij zwerft niet meer door het scherm, maar hij staat nog steeds niet verticaal gecentreerd.

code:

<div class="div_avatar">
  <div class="div_avatar_image">
    [img]"plaatje.gif"[/img]
  </div>
</div>

code:

.div_avatar { 
    background-color: #FFFFFF;
    width: 65px;
    height: 65px;
    border-style: solid;
    border-color: #D1B407;
    border-width: 1px;
    text-align: center;
    vertical-align: middle;
    position: relative;
}

.div_avatar_image { 
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -32px;
    margin-top: -32px;
}

edit:

[ Voor 28% gewijzigd door Verwijderd op 12-01-2006 12:26 ]

[Sappie]

Geef je image ff display block; dan zal ie wel verticaal gecentreerd zijn wss. zo dus:

code:

<div class="div_avatar">
    [img]"plaatje.gif"[/img]
</div>

icm:

code:

.div_avatar { 
    background-color: #FFFFFF;
    width: 65px;
    height: 65px;
    border: 1px solid #D1B407;
    position: relative;
}

.div_avatar img { 
    position: absolute;
    display: block;
    left: 50%;
    top: 50%;
    margin: -32px 0 0 -32px;
}

[ Voor 33% gewijzigd door Sappie op 12-01-2006 12:40 ]

[Verwijderd]

Nope helaas.. Trouwens, hij centreert ook niet horizontaal (ook al niet voor sappie's suggestie)... Die left en top werken gewoon niet zo lijkt het. Kan het met bepaalde header informatie te maken hebben misschien?

[Sappie]

Werkt idd ook niet zag ik net (had het niet getest). Hier dan iets wat hier in Firefox 1.0.6 en IE (en in Konqueror) hetzelfde resultaat bewerkstelligt (wel hackerig en ben er niet kapot van):

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
    <title>test</title>
    <style type="text/css">
        .div_avatar { 
            width: 65px;
            height: 65px;
            overflow: hidden;
            border: 1px solid #D1B407;
            line-height: 62px; /* optimale waarde voor FF voor verticale centrering */
            text-align: center;
        }
        
        .div_avatar img { 
            vertical-align: middle;
        }
    </style>
    <!--[if lt IE 7]>
          <style type="text/css">
              .div_avatar { position: relative; }
              
              .div_avatar img { 
                display: block;
                position: absolute;
                top: expression((65 - this.clientHeight) / 2 + "px"); 
                left: expression((65 - this.clientWidth) / 2 + "px");
            }
          </style>
    <![endif]-->
</head>
<body>
    <div class="div_avatar">
        [img]"bef.gif"[/img]
    </div>  
</body>
</html>

Als de grootte van het plaatje en de grootte van je avatar div altijd hetzelfde zijn is dit uiteraard een stuk eenvoudig op te lossen.

[ Voor 14% gewijzigd door Sappie op 12-01-2006 13:23 ]

[Verwijderd]

Dat werkt in ieder geval in IE! Helaas in FF hier niet.

Sappie schreef op donderdag 12 januari 2006 @ 13:22:
Werkt idd ook niet zag ik net (had het niet getest). Hier dan iets wat hier in Firefox 1.0.6 en IE (en in Konqueror) hetzelfde resultaat bewerkstelligt (wel hackerig en ben er niet kapot van):

Hm, wat zijn de mogelijke nadelen van zoiets dan? Ben niet zo thuis in dergelijke css hacks.

code:

<!--[if lt IE 7]>

Heb nooit met zulke If statements in css gewerkt, dus misschien een domme vraag, maar werkt dat alleen binnen de style tags IN de html of ook in een extern stylesheet? Vraag het omdat er toch nog iets niet helemaal goed gaat in FF.

Als de grootte van het plaatje en de grootte van je avatar div altijd hetzelfde zijn is dit uiteraard een stuk eenvoudig op te lossen.

De div is altijd even groot, maar de image kan varieëren (wel maximaal 60x60).

Tot zover in ieder geval bedankt!

[Sappie]

Verwijderd schreef op donderdag 12 januari 2006 @ 14:03:
[...]
Hm, wat zijn de mogelijke nadelen van zoiets dan? Ben niet zo thuis in dergelijke css hacks.

Ik ben er niet kapot van, aangezien de line-height property icm font-size en vertical-align niet uniform ondersteund / gerendered worden door alle browsers. Hij lijnt het namelijk in Konqueror weer net ff anders uit dan in Firefox.

Heb nooit met zulke If statements in css gewerkt, dus misschien een domme vraag, maar werkt dat alleen binnen de style tags IN de html of ook in een extern stylesheet? Vraag het omdat er toch nog iets niet helemaal goed gaat in FF.

Zulke statements noemt met conditional comments en worden alleen ondersteund door IE.

Van welke versie van Firefox maak je gebruik? Want hier werkt het zoals gezegd in Firefox 1.0.6 (zit op school en kan ff 1.5 niet installeren) wel goed.

[TheRookie]

Verwijderd schreef op donderdag 12 januari 2006 @ 12:10:
Euhm, echt niet.. Ik krijg het idee dat jullie allebei op de positie van de div letten. Maar het gaat om de positie van de image IN de div. En die staat echt topleft (zowel in FF als in IE).

Je hebt helemaal gelijk
Ik dacht dat 't plaatje (incl. lijn eromheen) zo hoorde, dus niet

[Verwijderd]

Sappie schreef op donderdag 12 januari 2006 @ 14:27:

[...]

Zulke statements noemt met conditional comments en worden alleen ondersteund door IE.

Maar ze werken dus ook gewoon in een extern stylesheet?

Van welke versie van Firefox maak je gebruik? Want hier werkt het zoals gezegd in Firefox 1.0.6 (zit op school en kan ff 1.5 niet installeren) wel goed.

Ik gebruik 1.0.7, dus lijkt me dat 't daar dan niet aan zal liggen.

[Sappie]

Je moet er met google maar eens op zoeken De conditional comments dienen natuurlijk in de html te staan. Wel kan je dan uiteraard voor IE een andere stylesheet opgeven.

en verder.. het voorbeeld werkt hier toch echt met firefox 1.0.6 (onder zowel linux als windows). Heb het zojuist nog een keer gecopy paste en getest in combinatie met een plaatje.

[Verwijderd]

Ik snap niet waarom het hier nu niet werkt. Heb je stylecode rechtstreeks gecopy/paste (nu IN de html head ), maar in FF 1.0.7 doet hij het bij mij echt niet en in IE wel.

PS. Inderdaad, zou mezelf dan via google in conditional comments kunnen verdiepen. Vervelende gewoonte, dat gelijk doorvragen naar meer info.

[Verwijderd]

Deze http://users.simpy.be/got.html werkt hier ook prima met IE 6 & FF1.0.7

[Sappie]

Verwijderd schreef op donderdag 12 januari 2006 @ 16:51:
Ik snap niet waarom het hier nu niet werkt. Heb je stylecode rechtstreeks gecopy/paste (nu IN de html head ), maar in FF 1.0.7 doet hij het bij mij echt niet en in IE wel.

Laat eens zien wat je nu exact hebt dan. Als je de code gewoon in een leeg bestand plakt werkt het dan ook niet?

edit:
hier thuis in FF 1.5 wordt het ook 'juist' gerendered

[ Voor 9% gewijzigd door Sappie op 12-01-2006 17:17 ]

[Verwijderd]

Hm my bad.. Het zit hem inderdaad ergens anders in. Wat je me hebt gegeven werkt ook hier gewoon als ik er een losse file van maak. Stom dat ik dat niet gelijk even geprobeerd heb (had ik met de andere tips wel gedaan namelijk).

Thanks Sappie! Ik kan weer even verder zoeken in ieder geval.

@ bakman, topic niet helemaal gelezen zeker?

[klokop]

Zo werkt het bij mij prima (FF 1.0.7):

code:

<style>
div {
  border: 1px solid green;
  display: table-cell;
  width: 300px;
  height: 300px;
  text-align: center;
  vertical-align: middle;
  }
</style>

<div>
  [img]"http://gathering.tweakers.net/usericons/30721/vierkant_bw_lijn.gif">
</div[/img]

[Verwijderd]

klokop schreef op vrijdag 13 januari 2006 @ 16:43:
Zo werkt het bij mij prima (FF 1.0.7):

Inderdaad, maar niet in IE.

[BtM909]

Verwijderd schreef op maandag 16 januari 2006 @ 10:44:
[...]

Inderdaad, maar niet in IE.

Wat is het nut van deze opmerking (met de smilie erachter)

[Verwijderd]

BtM909 schreef op maandag 16 januari 2006 @ 11:25:
[...]

Wat is het nut van deze opmerking (met de smilie erachter)

Omdat het hele topic erover gaat dat het wel in FF goed gaat maar dan weer niet in IE of andersom, maar dat 't in ieder geval in beiden goed moet werken. Verder was er al een goede oplossing gepost. De poster heeft mijns inziens dus niet echt goed gelezen. De laatste post van die persoon brengt dus alleen een toekomstige viewer van dit topic in de war. Maargoed, laten we hier verder niet op in gaan. Sappie heeft in ieder geval een voor mij voorlopig werkende oplossing gegeven.