[HTML] plaatje centreren verticaal

Wat Fool al plaatste in 2003:
HTML:

1	<div class="abscenter">

Cascading Stylesheet:

1 2 3 4 5 6 7 8 9 10

div.abscenter {   width: 300px;   height: 300px;   position: absolute;   top: 50%;   left: 50%;   margin-left: -150px; /* helft van width */   margin-top: -150px; /* helft van height */   background: black; }

Al vind ik deze manier ook nog steeds een trucje, en niet echt dé oplossing. Eigenlijk zou ik
Cascading Stylesheet:

1 2 3 4

div.abscenter {   margin: auto auto;   width: 300px;   height: 300px;

willen kunnen gebruiken in een wrapper...

H004 wijzigde dit bericht 26-10-2007 09:52 (36%)

Right, die had ik al door
Maar als je nu eens niet de hoogte van je container weet?

quote:

H004 schreef op vrijdag 26 oktober 2007 @ 09:58:
Hmmm, volgens mij zit je dan toch vast aan een 1-cel-tabel met middle en center, of een javascript-oplossing. Beide natuurlijk geen schoonheidswondertjes. Ben ook wel benieuwd naar goede oplossingen voor dat probleem, al geloof ik niet dat het met puur css mogelijk is op dit moment...

En daarom vroeg ik het dus.

TeeDee wijzigde dit bericht 26-10-2007 10:02 (69%)

Hmmm, volgens mij zit je dan toch vast aan een 1-cel-tabel met middle en center, of een javascript-oplossing. Beide natuurlijk geen schoonheidswondertjes. Ben ook wel benieuwd naar goede oplossingen voor dat probleem, al geloof ik niet dat het met puur css mogelijk is op dit moment...

@RobIII
't klopt dat het niets uit maakte. Ik bedoelde dan eigenlijk ook dat er align="center" valign="middle" moest komen te staan, ipv twee keer align. En inderdaad dan moet het wel middle zijn

En de manier waarop het (volgens mij) wel kan met een afbeelding waarvan je de breedte niet weet:
margin:auto;

(dan kan je je afbeelding _niet_ absoluut positioneren, dus alleen relatief).

Als het niet al te erg is diep ik dit topic ook weer even op
Ik had namelijk ook geen durf om een nieuw topic aan te maken xD

Ik wil dus voor een fotoalbum-overzicht thumbnails verticaal centreren in een div.

Via google kwam ik deze 3 manieren ten overvloede tegen:

manier 1:
code:

.img{
top:50%;
margin:-{helft van imghoogte}px;
}

Werkt niet want imghoogte is niet bekend

manier 2:
geklier met line-height; werkt niet

manier 3:
Plaatje als achtergrond; werkt niet want dan kan je de img geen border geven..


Verder hielp experimenteren met div relative en img absolute ook niet echt..

WIE KAN MIJ HELPEN?

Kan je het niet server-side oplossen? Mijn ervaring is dat je jezelf daarmee een hoop ellende bespaart.

Het probleem is dat is dat ik net een keer ALLE CSS netjes in m'n stylesheet wilde hebben waar ik dus niet met m'n php bij kan

quote:

gersompie schreef op woensdag 23 juli 2008 @ 21:17:
Het probleem is dat is dat ik net een keer ALLE CSS netjes in m'n stylesheet wilde hebben waar ik dus niet met m'n php bij kan

nouja.. ik bedoel meer dat je iets maakt in de richting van <img src="serveerPlaatje.php?image=1234"/> waarbij serveerPlaatje.php dus een plaatje met padding/borders uitserveerd.

Je bedoelt dat ik dan met php een stukje bovenaan het plaatje moet plakken dat dezelfde kleur heeft als de achtergrond? Ik wil eigenlijk liever de plaatjes niet door een GD script heen slepen want ik heb de ervaring dat dat wel eens hapert.. Dan heb je om de zoveel tijd half-zwarte plaatjes in de overzicht (vooral als dat script 30x per overzicht moet draaien wordt die kans groter)..
Ik maak het mezelf trouwens wel moeilijk

edit:
Kan het niet met een include? Dat ik een stukje html include?
zoiets:
include(plaatjes.php?hoogte=300px);
en dan css padding..

gersompie wijzigde dit bericht 23-07-2008 21:27 (13%)

quote:

gersompie schreef op woensdag 23 juli 2008 @ 21:25:
Je bedoelt dat ik dan met php een stukje bovenaan het plaatje moet plakken dat dezelfde kleur heeft als de achtergrond? Ik wil eigenlijk liever de plaatjes niet door een GD script heen slepen want ik heb de ervaring dat dat wel eens hapert.. Dan heb je om de zoveel tijd half-zwarte plaatjes in de overzicht (vooral als dat script 30x per overzicht moet draaien wordt die kans groter)..
Ik maak het mezelf trouwens wel moeilijk

edit:
Kan het niet met een include? Dat ik een stukje html include?
zoiets:
include(plaatjes.php?hoogte=300px);
en dan css padding..

Neejoh, die plaatjes maak je gewoon maar 1 keer en stop je in een cachemap. Heb je meteen performancewinst als je grote plaatjes resized.

Maargoed, het kan wel met css, maar het is een hoop gepiel. Ik heb op m'n werk wel ergens een leuk voorbeeld. Als je morgen nog geen oplossing hebt kan ik het wel even posten.

Afaik is dit artikel al vrij oud, maar heb je hier wat aan?

(dit komt uit mijn oude bookmarks, dus ik heb geen idee of dit nog werkt

Zelf ben ik over dit probleem een keer op deze pagina gekomen. Echter kun je die code niet direct knippen en plakken want IE7 pakt hem dan niet. Ik zou verwachten dat hier wel mensen rondlopen die dit verhaaltje IE7 compatible zouden kunnen maken.

Edit: Zie net dat hij al iets heeft gedaan om het IE7 compatible te maken, # hack ipv _ hack.

funkwurm wijzigde dit bericht 23-07-2008 23:49 (13%)

IE7 is juist de enigste browser bij mij waar die manier van TeeDee's link bij werkt xD
FF Opera en Safari laten het afweten

*Gersompie haat hacks omdat hij dan o.a. css in z'n htmldocument moet zetten*

gersompie wijzigde dit bericht 24-07-2008 09:27 (29%)

quote:

gersompie schreef op donderdag 24 juli 2008 @ 09:24:
IE7 is juist de enigste browser bij mij waar die manier van TeeDee's link bij werkt xD
FF Opera en Safari laten het afweten

Dan doe je toch iets anders niet goed, want in IE7, FF3, Opera en Safari (win) werkt de gelinkte pagina prima.

quote:

*Gersompie haat hacks omdat hij dan o.a. css in z'n htmldocument moet zetten*

*kuch* conditional css statements.

TeeDee wijzigde dit bericht 24-07-2008 09:34 (48%)

@Teedee; sorry, ik was in de war met een andere pagina die ik voor me had. Jou manier krijg ik sowieso niet goed verwerkt in m'n eigen code (ik zal misschien ff code posten) maar het voorbeeld werkt bij mij toch echt niet in IE7. Bovendien valt in opera de border van de outerdiv weg..

HTML:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<!--[if IE]>     <style>      .wraptocenter span {      display: inline-block;      height: 100%;      }     </style> <![endif]--> <div id="div_img" onmouseover="thumb_over(this);" onmouseout="thumb_out(this);" onclick="thumb_click(\'hallo\');"> <span></span> <img src="albums/1234/klein/1235.jpg" alt="afbeelding"> </div>

JavaScript:

1 2 3 4 5 6 7 8 9 10 11

function thumb_over(thumb){ thumb.style.backgroundColor = "#CBDCDC"; } function thumb_out(thumb){ thumb.style.backgroundColor = "#E7EDED"; } function thumb_click(thumb){ document.location = "index.php?foto=" + thumb; }

Dit moet goed zijn volgens je link;
Cascading Stylesheet:

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

#div_img{ width:139px; height:139px; border:1px solid #A2C1CE; background:#E7EDED; float:left; margin-top:4px; margin-left:4px; cursor:pointer; display: table-cell; text-align: center; vertical-align: middle; } .div_img * { vertical-align: middle; } /*\*//*/ .wraptocenter {     display: block; } .wraptocenter span {     display: inline-block;     height: 100%;     width: 1px; } /**/

Gersompie wil geen omslachtige code voor een site die juist het overzicht zelve moet zijn..
CASE CLOSED (ik doe het wel serverside)

gersompie wijzigde dit bericht 24-07-2008 10:12 (44%)

In IE6 werkt dit:
HTML:

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 53 54 55 56 57 58 59 60

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="nl"> <head> <title>center vertically</title> <style type="text/css"> div,span,img {     padding:0;     margin:0; } body {     background-color:lightblue; } div.outer {     position:relative;     width:400px;     height:300px;     background-color:#aaa; } div.inner {     position:relative;     background-color:cornsilk;     top:50%;     height:50%; } div.inner span {     background-color:pink;     position:relative; } div.inner span div {     position:absolute;     top:0px;     bottom:0px;     width:100%;     background-color:pink;     text-align:center; } div.inner img {     position:relative;     top:-50%; } </style> </head> <body> <div class="outer">     <div class="inner">         <span>             <div>                 <img src="http://images.google.nl/intl/nl_ALL/images/images_hp.gif" alt="test">             </div>         </span>     </div> </div> </body> </html>

De kleurtjes zijn om duidelijk te krijgen wat alle divs en de span doen:

• div.inner heeft zijn top in het midden van de div.outer;
• de span neemt de hoogte aan van het plaatje;
• de div daarin neemt de hoogte aan van de span;
• met top: -50% spring het plaatje precies de helft van de div (dus van de span, dus van zichzelf) boven de rand van de div (dus van de span, dus van de div.inner) uit.

Of dit werkt in IE7 weet ik niet.

In FF, SF, OP kun je gewoon werken met display: table, table-row en table-cell en vervolgens kun je gewoon verticaal uitlijnen in de div met vertcal-align:middle. Voor Safari moet je wel al deze 3 gebruiken in geneste divs, anders werkt het niet.

table, table-row en table-cell werken alleen in IE.. Had ik al op alle mogelijke manieren die ik kon vinden en bedenken uitgeprobeerd.. Maar ik heb het nu al serverside.. Dat scheelt zo'n 40 regels (a)

Maar ik hou hem erin ^^ Dank iedereen

gersompie wijzigde dit bericht 24-07-2008 13:12 (10%)

Hmmm, table, table-row en table-cell werken bij mij in Firefox 3, Opera 9 en Safari 4 (developers preview) en juist niet in IE6.

Zie ook http://www.quirksmode.org/css/display.html.

* TeeDee vraagt zich inderdaad ook af hoe gersompie test.

een div in een span mag niet

Overigens snap ik niet zo goed waarom een aardige oplossing compleet genegeerd werd:

moozzuzz in "[HTML] plaatje centreren verticaal"

Bosmonster wijzigde dit bericht 24-07-2008 13:45 (11%)

quote:

BARTdG schreef op donderdag 24 juli 2008 @ 13:18:
Hmmm, table, table-row en table-cell werken bij mij in Firefox 3, Opera 9 en Safari 4 (developers preview) en juist niet in IE6.

Zie ook http://www.quirksmode.org/css/display.html.

Ik had het over IE7

quote:

Bosmonster schreef op donderdag 24 juli 2008 @ 13:44:
een div in een span mag niet

Touché. Niet aan gedacht.
Van de binnenste div kun je dan ook een span maken met display:block. dat zou ook moeten werken.

quote:

Bosmonster schreef op donderdag 24 juli 2008 @ 13:44:
Overigens snap ik niet zo goed waarom een aardige oplossing compleet genegeerd werd:

moozzuzz in "[HTML] plaatje centreren verticaal"

Omdat hij volgens de TS met een border wil werken.

quote:

gersompie schreef op donderdag 24 juli 2008 @ 13:51:
Ik had het over IE7

Dus IE7 ondersteunt die table, table-row, table-cell ook?

FF, OP en SF doen dat in elk geval.

BARTdG wijzigde dit bericht 24-07-2008 14:16 (7%)

IE7 is bij mij de enigste die het doet bij table, table-row enzo...
Maar ik doe het wel serverside want ik moest nu toch al persé in in een style zetten wat variabel was d.m.v. php dus nu maakt het toch niets meer uit..