[css] verticaal centreren in een div - Softwareontwikkeling

woensdag 28 maart 2007 01:36

Acties:

0 Henk 'm!

Tring Tring!

Topicstarter

Ik probeer een plaatje verticaal en horizontaal te centreren in een div. Probleem is, dat de plaatjes die in de div komen niet allemaal even hoog zijn.

De betreffende Div heeft een vaste hoogte.

Via Google kwam ik oa deze pagina tegen:
http://www.student.oulu.fi/~laurirai/www/css/middle/

Maar ook de daar geboden oplossing "Using absolute positioning and negative margin" werkt alleen als het plaatje een vaste hoogte heeft.

Ik probeer de klant al zover te krijgen dat hij eerst z´n images door een resizer heen haalt, maar dat is teveel werk want dat moet in z´n huidige site ook niet nodig. (Ja gek, tables, frames en een draak aan html zooi in een layout waarbij de hoogte vh plaatje niet van belang is). Helaas nog geen succes.

Jullie misschien een tip om een image in een div zowel verticaal als horizontaal te centreren ?

Verstand van Voip? Ik heb een leuke baan voor je!

woensdag 28 maart 2007 08:35

Acties:

0 Henk 'm!

tec

TEC

Ik heb zo'n exact dezelfde vraag een aantal weken geleden gesteld. Zie hieronder.

[css] verticaal centreren image

woensdag 28 maart 2007 09:37

Acties:

0 Henk 'm!

Sappie

De Parasitaire Capaciteit!

Ik heb een oplossing aangedragen in dit topic: \[html/css] img in div verticaal centreren

Ik weet niet of het in IE7 werkt (houd me niet echt bezig met web development atm), maar in FF 2.0.0.3 werkt het nog goed. Hoop dat je daar wat aan hebt

Specs | Audioscrobbler

woensdag 28 maart 2007 09:39

Acties:

0 Henk 'm!

bakakaizoku

ja

Je zou eventueel, ik weet niet precies waar het voor is maar het is een soort van oplossing, het plaatje als achtergrond van de div kunnen instellen, hem daar centreren dmv. background-position en hem niet laten repeaten.

PSN: bakakaizoku - WoW: Thiccblonde (GM of Phoenix Ascension) @ Twisting-Nether

woensdag 28 maart 2007 12:07

Acties:

0 Henk 'm!

Anoniem: 177275

Zie het topic waar Tec al naar verwees. Als je kunt inderdaad het beste kiezen voor de background-oplossing. Wil je dat niet, dan werkt display:table-cell in ieder geval in de alternatieve browsers.

Volgens msdn ondersteunt IE dit niet. Ik zie wel staan dat IE display:table-header-group en display:table-footer-group ondersteunt. (De bedoeling hiervan is dat ze, als de table meerdere pagina's beslaat, op elke pagina te zien zijn.)

Ik heb hier geen Win bij de hand, dus ik kan het niet checken, maar misschien werkt dit. In elk geval zouden tabel-header-group en table-footer-group zich moeten gedragen als TR's, dus in die zin vind ik het logisch dat je de vertical-align kunt instellen.

woensdag 28 maart 2007 16:27

Acties:

0 Henk 'm!

megamuch

Tring Tring!

Topicstarter

Goed ik heb weer even verder gepuzzeld met jullie suggesties (Thanks daarvoor) en heb nu de volgende test case.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
    <title>Untitled</title>
<style>

.outer
{
    float:left;
    border: 1px solid #000;
    width:250px;
    height:250px;
    margin:10px;
    text-align:center;
}
.outer div.inner {
    margin-top:25px;
}
.inner
{
    width: 200px;
    height: 200px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    border: 1px solid red;
}
</style>
<!--[if IE]><style>
.inner img
{
    margin-top: expression((200 - this.height)/2);
}
</style><![endif]-->
</head>

<body>
<div class="outer">
    <div class="inner">
        <img src="http://movilplazatest.mediamix.nl/displays/nokia5300.jpg" />
    </div>
    dfsgdfgsfdgfsgds
</div>

<div class="outer">
    <div class="inner">
        <img src="http://movilplazatest.mediamix.nl/displays/nokia5300.jpg" />
    </div>
    dfsgfgsdgfd
</div>


</body>
</html>

Dit werkt prima in IE7, maar dit wil onder FF 2.0 weer niet

(Ik heb het meestal anders om).
Mijn browser (en css kennis) is niet zo heel groot, maar voor zover ik kan zien, klopt bovenstaande helemaal. Waarom FF het dan niet wil tonen (IE6 gen idee, moet nog testen) is me dan ook echt een raadsel.

Overigens heb ik deze url gebruikt bij dit opzetje.

En hier is een online versie.

Iemand nog een duwtje in de goede richting voor me?

Verstand van Voip? Ik heb een leuke baan voor je!

donderdag 29 maart 2007 11:58

Acties:

0 Henk 'm!

Sappie

De Parasitaire Capaciteit!

Ik heb, met het oog op mijn vorige oplossing en ondanks dat ik bijna nooit meer web develop, nog even gekeken en ben tot zoiets gekomen. De rode omlijning kan geen fatsoenlijke margin hebben (in IE klopt ie niet en in FF kun je van de img geen block level element maken). Wanneer je gebruik maakt van IE7 en het werkt nog steeds net zo crap als IE6 zonder de conditional comments, dan moet je uiteraard ff de voorwaarde van de conditional comment aanpassen.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
    <title>Untitled</title>
    <style type="text/css">
        .avatar { 
        position: relative;
            width: 250px;
            height: 250px;
            overflow: hidden;
            border: 1px solid #D1B407;
            line-height: 247px; /* optimale waarde voor FF voor verticale centrering */
            text-align: center;
        }
        
        .avatar img { 
            vertical-align: middle;
        border:1px solid red;
        }
    
    .avatar div {
        position: absolute;
        top: 100px;
        left: 0;
        text-align: middle;
        width: 250px;
        
    }
    
</style>
<!--[if lt IE 7]>
          <style type="text/css">
              .avatar { position: relative; }
              
              .avatar img { 
                display: block;
                position: absolute;
                top: expression((250 - this.clientHeight) / 2 + "px"); 
                left: expression((250 - this.clientWidth) / 2 + "px");
            }
          </style>
<![endif]-->
<body>
    <div class="avatar">
        <img src="./nokia5300.jpg" />
        <div>Omschrijving</div>
    </div>
</body>
</html>

Misschien heb je er wat aan (doet iig in FF2.0.0.3 en IE6 tzelfde). suc6

[ Voor 10% gewijzigd door Sappie op 29-03-2007 13:10 ]

Specs | Audioscrobbler

donderdag 29 maart 2007 15:21

Acties:

0 Henk 'm!

Anoniem: 200498

Dit werkt in Gecko browsers, Opera 6+. Safari, IE5+/Win, IE5/Mac.
Het is horizontaal en verticaal gecentreerd.
Vul bij de puntjes even de width & height van de container in

Cascading Stylesheet:

<style type="text/css">
.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: ...;
    height: ...;
}
.wraptocenter * {
    vertical-align: middle;
}
/*\*//*/
.wraptocenter {
    display: block;
}
.wraptocenter span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
/**/
</style>
<!--[if IE]><style>
.wraptocenter span {
    display: inline-block;
    height: 100%;
}
</style><![endif]-->

HTML:

1	<div class="wraptocenter"><span></span><img src="..." alt="..."></div>

[ Voor 16% gewijzigd door Anoniem: 200498 op 29-03-2007 16:46 ]

donderdag 29 maart 2007 15:47

Acties:

0 Henk 'm!

moozzuzz

Ik gebruik sinds vorige zomer volgende constructie: een list van images. Werkt fantastisch :^)

HTML:

<ul class="fotoboekfoto">
    <li class="fotoboekfoto"><a href="" ...><img alt="" src=""></a></li>
    <li class="fotoboekfoto"><a href="" ...><img alt="" src=""></a></li>
</ul>

Cascading Stylesheet:

1
2
3

ul.fotoboekfoto   {list-style: none; margin: 0; padding: 0; }
li.fotoboekfoto   {display: inline; text-align: center; padding:0; margin: 0;}
li.fotoboekfoto img {border: 10px solid #ffffff; background-Color: #f9f9f9; vertical-align:middle;}

fotoboek-voorbeeldje

donderdag 29 maart 2007 16:27

Acties:

0 Henk 'm!

Sappie

De Parasitaire Capaciteit!

offtopic:
Het fotoboek dat ik ooi ontwikkel heb staat bijvoorbeeld hier online: http://www.faboryrallytea...BHV+Expo+Groep+Rally+2006

Daar kan je bij nader inzien beter een list voor gebruiken. Toen ik die website heb gemaakt wist ik er nog niet zo veel van

De vorige en volgende zooi heb ik er zelf niet bijgemaakt; dit verklaart ook dat de popups te klein zijn.

Specs | Audioscrobbler

donderdag 29 maart 2007 16:38

Acties:

0 Henk 'm!

Blaise

De oplossing van moozzuzz waarschijnlijk niet toepasbaar voor TS. Het centreren gebeurt met display:inline, waardoor je geen vaste hoogte kan toekennen aan het canvas waarin de afbeelding moet komen te staan.

donderdag 29 maart 2007 17:14

Acties:

0 Henk 'm!

moozzuzz

Blaise schreef op donderdag 29 maart 2007 @ 16:38:
De oplossing van moozzuzz waarschijnlijk niet toepasbaar voor TS.

True, ik heb wat te snel gelezen vrees ik. M'n oplossing is inderdaad goed voor een reeks images, maar voor één item heeft een list wellicht minder zin... Werkt wellicht wel met een expliciete width en height op de <LI>, maar eigenlijk zijn we dan semantisch niet zo goed bezig...

donderdag 29 maart 2007 17:37

Acties:

0 Henk 'm!

Anoniem: 200498

moozzuzz schreef op donderdag 29 maart 2007 @ 17:14:
[...]
True, ik heb wat te snel gelezen vrees ik. M'n oplossing is inderdaad goed voor een reeks images, maar voor één item heeft een list wellicht minder zin... Werkt wellicht wel met een expliciete width en height op de <LI>, maar eigenlijk zijn we dan semantisch niet zo goed bezig...

Waarom is dat semantisch niet goed?
Semantiek gaat niet over breedte en hoogte toch? Meer over de structuur en of je het juiste element gebruikt.

donderdag 29 maart 2007 18:11

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Anoniem: 200498 schreef op donderdag 29 maart 2007 @ 17:37:
[...]

Waarom is dat semantisch niet goed?
Semantiek gaat niet over breedte en hoogte toch? Meer over de structuur en of je het juiste element gebruikt.

Omdat je met 1 item mss geen 'lijst' (list) hebt?

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

donderdag 29 maart 2007 22:57

Acties:

0 Henk 'm!

Blaise

Anoniem: 200498 schreef op donderdag 29 maart 2007 @ 17:37:
[...]

Waarom is dat semantisch niet goed?
Semantiek gaat niet over breedte en hoogte toch? Meer over de structuur en of je het juiste element gebruikt.

Ook al was het semantisch correct (is het niet, eventueel zou je andere container elementen kunnen gebruiken), dan nog werkt het helaas niet om een hoogte op te geven aan een inline element. Was het maar zo simpel

Op een website heb ik het op de simpele manier opgelost: met een background 50% 50%. Dat is semantisch niet helemaal correct omdat het plaatje onderdeel was van de inhoud.

De alternatieven spreken me niet aan. Ik zou bijvoorbeeld nooit kiezen voor een oplossing met CSS hacks om bepaalde browsers te (un)triggeren, dat vind ik te ranzig en te fragiel.